Extjs5 Gridpanel

表格

定义

/**
* 
*/
Ext.define("whrsmart.crm.users.ListView", {
    extend:'Ext.grid.Panel',closable : true,autoShow : true,autoScroll:false,scroll:true,
    requires:['whrsmart.crm.users.ListController','whrsmart.crm.users.ListViewModel','whrsmart.crm.users.AddView'],
    controller:'crm-users-List',
    viewModel:{type:'crm-users-List'},
    bind:'{listStore}',
    tbar: [
        { xtype: 'button', text: ' 新增 ',handler:'onAddClick' }
    ],
    dockedItems: [{  bind:'{listStore}',xtype: 'pagingtoolbar',displayInfo: true,displayMsg: '当前页面' + ' {0} - {1} 总页面 {2} ',emptyMsg:'没有数据', dock: 'bottom' }],
    constructor : function(config)
    {
        //this.initConfig(config);
        this.id=config.tabId;
        this.callParent(config);
    },
    columns: [
        {xtype: 'rownumberer'},
        { text: 'userId', dataIndex: 'userId',  align: 'center',hidden:true ,flex:1} 
        { xtype:'actioncolumn',width:X_WIDTH.Operate,text:'操作',align:'center',items:
            [
             {iconCls:'grid_row_edit',tooltip: '修改',handler: 'onEditClick'},
             {iconCls:'grid_row_delete',tooltip: '删除',handler: 'onDelClick'}
            ]
        }
       ]
});

加入复选框

列定义：

cols:[ 
        { xtype : 'checkcolumn', text : '选择', dataIndex : 'active' },
        { text: 'id', dataIndex: 'id', width: 100, align: 'center', hidden: false }
        ],

获取复选框选择的行

var selected = grid.getView().getSelectionModel().getSelection();
var _ids = "";
Ext.each(selected, function (item) {
   if (_ids != "") _ids += ",";
       _ids += item.data.id;
   });

加入行号：

columns: [
        {xtype: 'rownumberer'},
        { text: 'userId', dataIndex: 'userId',  align: 'center',hidden:true ,flex:1} 
       ]

使用
columns:[Ext.create(‘Ext.grid.RowNumberer’)]
也可以，但不能自动销毁。

加载事件及改变背景颜色

grid.getStore().on('load',function(s,records){
        var girdcount=0;
        s.each(function(r){
            console.log(r.get('title'));
    grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';
            girdcount=girdcount+1;
        });
    });

使用viewModel绑定的store，可以这样写

listeners: {
        load: function(pnl,eOpts) {         
            if (pnl.getRootNode().hasChildNodes()) {
                pnl.each(function(r){
                    console.log(r);
                    //r.data.operations='efg';
                });
            } else {
                console.log('no childs');
            }
        }
    },

修改单元格的值

var models=grid.store.getRange();
models[0].set('title','newvalue');

reader修改单元格的值

/**
* 
*/
Ext.define("whrsmart.km.contents.ListReader", {
    extend : 'Ext.data.reader.Json',
    alias: 'reader.km-contents-List',
    type:'json',
    rootProperty:'d.Table.rows',
    totalProperty:'d.Records',
//    read:function(response){
//       var data = response;
//
//         if (response && response.responseText) {
//             data = this.getResponseData(response);
//         }
//
//         if (data) {
//             //CUSTOM MODIFY AND DATA MERGING FOR MODEL USE
//             for (var item in data.d.Table.rows) {
//               data.d.Table.rows[item].typeId=999;
//             }
//             
//             console.log(data);
//             return this.readRecords(data.d.Table.rows);
//         } else {
//             return this.nullResultSet;
//         }
//    }
    getResponseData : function(response) {
        var data = Ext.decode(response.responseText);
        var obj = {};

        Ext.Ajax.request({
            url:_app_+'/rest/Km/S_Km_Types/GetLists/?page=1&rows=5000',
            method:'get',async:false,
            success: function(resp,opts) {
                var json = Ext.util.JSON.decode(resp.responseText);

                Ext.each(json.d.Table.rows, function (item) {
                    obj['type_'+item['typeId']] = item;
                });
            },   
            failure: function(resp,opts) {   

            }
        });
        for (var item in data.d.Table.rows) {
          data.d.Table.rows[item].typeTitle=obj['type_'+data.d.Table.rows[item].typeId].typeTitle;
        }
        return data;
    }
});

引用grid

view

Ext.define("test1.crm.users.AddView", {
    extend : 'Ext.window.Window',
    requires : [ 'test1.crm.users.AddController' ,'whrsmart.crm.userDevices.ListViewForUser'],
    width : 850,autoheight:true,controller : 'crm-users-Add',bodyPadding : 10,modal:true,grid:null,

    closable : true,
    autoShow : true,
    title:'用户信息',

    referenceHolder: true,
    items: {
        xtype: 'panel',

        items: [{xtype:'form',reference:'form',layout:"form",autoHeight: true,columnWidth:.50,
            items:[
                   {xtype:'crm-userDevices-ListViewForUser',closable:false,height:100,columnWidth:.50,reference:'form1'}
                   ]
        }
    }
);

grid

Ext.define("test1.crm.users.AddController", {
    extend : 'Ext.app.ViewController',
    alias : 'controller.crm-users-Add',
    requires:['test1.util.Util'],
    onAfterrender:function(view,a,b,c,d){
        var form=this.lookupReference('form');
        var list=view.query ('crm-userDevices-ListViewForUser')[0];
        console.log(list.viewModel);
        var store=list.viewModel.storeInfo.listStore;

        var proxy=store.proxy;
        proxy.extraParams={"userId":view.record.data.userId};

        setTimeout(function(){
            store.load();   
        },500);

        var _formpanel=view.down('form');
        if(view.record.data.userId>0){
            _formpanel.loadRecord(view.record);
        }
    }
});