[Extjs6]随记 创建store 实现添加、修改、删除功能

//创建关系维护界面
organizeLocalStore = Ext.create('Ext.data.Store',{
model: 'Admin.model.baseinfo.organize',
   autoLoad: true,
   pageSize: 8,
   autoLoad: {start: 0, limit: 8},
   
   proxy: {
       type: 'ajax',
       noCache:false,
       api:{
        read : '/xxxxxx/view.action',
           create : '/xxxxxx/create.action?token='+token,
           update: '/xxxxxx/update.action?token='+token,
           destroy: '/xxxxxx/delete.action?token='+token
       },
       reader: {
           type: 'json',
           root: 'data',
           successProperty: 'success',
           totalProperty: 'total'
       },
       writer: {
           type: 'json',
           writeAllFields: true,
           encode: false,
           root: 'data'
       },
       listeners: {
           exception: function(proxy, response, operation){
               Ext.MessageBox.show({
                   title: 'REMOTE EXCEPTION',
                   msg: response.responseText,
                   icon: Ext.MessageBox.ERROR,
                   buttons: Ext.Msg.OK
               });


           }
       }
   }
});


/


//store
var orgSnStore = null;
var orgPreCodeStore = null;


Ext.define('Admin.view.shishijiankong.OrganizeEdit', {
    extend: 'Ext.window.Window',


    requires: ['Ext.form.Panel','Ext.form.field.Text'],


    title : '编辑组织',
    layout: 'fit',
    autoShow: true,
    width: 350,


    items:[
        {
            xtype: 'form',
            padding: '5 5 0 5',
            border: false,
            style: 'background-color: #fff;',
            
            fieldDefaults: {
                anchor: '100%',
                labelAlign: 'left',
                allowBlank: false,
                combineErrors: true,
                msgTarget: 'side'
            },


            items: [
                {
                    xtype: 'textfield',
                    name : 'id',
                    fieldLabel: 'id',
                    hidden:true
                },  
                {
                    xtype: 'textfield',
                    name : 'orgCode',
                    fieldLabel: 'orgCode',
                    hidden:true
                },
                {
                    xtype: 'combobox',
                    fieldLabel: '上级组织代码',
                    name : 'orgPreCode',
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'value',
                    listeners:{
                        beforerender:function(){
                            this.setStore(orgPreCodeStore);
                        } 
                    }
                },
                {
                    xtype: 'textfield',
                    name : 'orgName',
                    fieldLabel: '组织名称'
                },
                {
                    xtype: 'combobox',
                    name : 'orgSn',
                    fieldLabel: '标识码',
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'value',
                    listeners:{
                        beforerender:function(){
                            this.setStore(orgSnStore);
                        } 
                    }
                },
                {
                    xtype: 'textfield',
                    name : 'orgType',
                    fieldLabel: '组织类型',
                    value: '1'
                },
                {
                    xtype: 'textfield',
                    name : 'memo',
                    fieldLabel: '描述'
                }
            ]
        }
    ],
    dockedItems:[
        {
            xtype: 'toolbar',
            dock: 'bottom',
            id:'buttons',
            ui: 'footer',
            items: ['->', 
                {
                    iconCls: 'fa fa-floppy-o',
                    itemId: 'save',
                    text: 'Save',
                    handler: function(){
                        var win    = this.up('window'),
                            form   = win.down('form'),
                            record = form.getRecord(),
                            values = form.getValues();
                        console.log("----------------save data--------------");
                        console.log(win);
                        console.log(form);
                        console.log(values);
                        if (values.id > 0){
                            record.set(values);
                        }else{
                            record = Ext.create('Admin.model.baseinfo.organize');
                            record.set(values);
                            record.setId(0);
                            //record.set("orgCode","");
                            console.log(record);
                            organizeLocalStore.add(record);
                        }
                        console.log("----------------end save data--------------");
                        win.close();
                        organizeLocalStore.sync({
                            success:function(){
                                organizeLocalStore.reload();
                                reloadIframe();
                            }
                        });
                    }
                },{
                    iconCls: 'fa fa-times',
                    text: 'Cancel',
                    handler: function(){
                        this.up('window').close();
                    }
                }]
        }
    ],

    initComponent:function(){
        //初始化添加下拉的数据store
        orgPreCodeStore = Ext.create("Ext.data.Store",{
            fields: ['name','value']
        });
        orgSnStore = Ext.create("Ext.data.Store",{
            fields: ['name','value']
        });
        organizeLocalStore.each(function(record){
            console.log(record);
            orgPreCodeStore.add({
                "name":record.get("orgName"),
                "value":record.get("orgCode")
            });
            orgSnStore.add({
                "name":record.get("orgSn"),
                "value":record.get('orgSn')
            });
        });
        console.log("--------------------");
        console.log(orgPreCodeStore);
        console.log(orgSnStore);
        this.callParent(arguments);
    }
});

//

Gridpanel的dockedItems里添加一个功能按钮：

dockedItems: [
{
        xtype: 'toolbar',
        dock: 'top',
        items: [
        {
        text: '添加',
        handler:function(){
        Ext.create('Admin.view.shishijiankong.OrganizeEdit').show();
        }
        },
        {
        text: '删除',
        handler:function(){
        //找到选中的记录
        console.log("---------delete----------");
        console.log(this);
        console.log(this.up("window").down("gridpanel"));
        var grid = this.up("window").down("gridpanel");
        record = grid.getSelectionModel().getSelection(), 
   organizeLocalStore.remove(record);
   organizeLocalStore.sync({
    success:function(){
    organizeLocalStore.reload();
    reloadIframe();
    }
   });
        }
        }
        ]
},
{
xtype: 'pagingtoolbar',
dock: 'bottom',
store:organizeLocalStore,
displayInfo : true
}
],
listeners:{
itemdblclick:function(self,record,item , index , e , eOpts ) {
var edit = Ext.create('Admin.view.shishijiankong.OrganizeEdit').show();
        if(record){
        edit.down('form').loadRecord(record);
        }
}
}

转载于:https://my.oschina.net/u/3702584/blog/1547036