[Extjs6]淺談Ext.data.Store的使用.
阿新 • • 發佈:2019-02-18
定義model
Ext.define('Example.model.Contact', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'phone', 'email']
});
建立store
//方式一
var exampleStore = Ext.create('Ext.data.Store',{
model: 'Example.model.Contact',
autoLoad: true,
pageSize: 35,
autoLoad: {start: 0, limit: 35 },
proxy: {
type: 'ajax',
api: {
read : 'xxxxx/view.action',
create : 'xxxxx/create.action',
update: 'xxxxx/update.action',
destroy: 'xxxxx/delete.action'
},
reader: {
type: 'json',
root: 'data',//表明返回的資料
successProperty: 'success'//返回資料這個欄位的值表明返回資料成功與否
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
},
listeners: {
exception: function(proxy, response, operation){
alert("Exception" );
}
}
});
//方式二
直接在一個js檔案中自定義store
Ext.define('Example.store.Contacts', {
extend: 'Ext.data.Store',
model: 'Example.model.Contact',
autoLoad: true,
pageSize: 35,
autoLoad: {start: 0, limit: 35},
proxy: {
type: 'ajax',
api: {
read : 'xxxxx/view.action',
create : 'xxxxx/create.action',
update: 'xxxxx/update.action',
destroy: 'xxxxx/delete.action'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
var exampleStore = Ext.create('Example.store.Contacts');
對store資料的增刪改
新增或者更新
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),//獲取記錄 可能是更新也可能是null
values = form.getValues();//獲取資料
if (values.id > 0){
record.set(values); //更新資料
} else{
//建立一個新的資料物件
record = Ext.create('Example.model.Contact');
record.set(values);
record.setId(0);
**exampleStore.add(record); //store新增資料**
}
win.close();
**exampleStore.sync();//觸發store發起連結請求,更新store中的變動資料。**
資料刪除
var grid = this.getContactlist(), //獲取gridpanel物件
record = grid.getSelectionModel().getSelection(),
store = this.getContactsStore();//獲取相應的store物件
**store.remove(record);//在store中刪除這個record**
**this.getContactsStore().sync();//觸發store發起連結請求,更新store中的變動資料。**
因為工作的需要,對Extjs6的使用稍微研究並記錄下,方便下次查閱。