Extjs5 Gridpanel

来源：互联网发布：柯桥区干部网络编辑：程序博客网时间：2024/05/16 10:11

表格

定义

/*** */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);        }    }});

0 0