Extjs5 Gridpanel

原创 2015年11月18日 08:13:47

表格

定义

/**
* 
*/
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);
        }
    }
});
版权声明:(谢厂节的博客)博主文章绝大部分非原创,转载望留链接。 举报

相关文章推荐

使用ExtJS5 GridPanel实现表格嵌套SubGrid(基于ExtJS MVC模式)

使用ExtJS-5.10 的 GridPanel组件实现表格嵌套,主要依赖于GridPanel自带的RowExpander插件,具体用法以及配置参数请参照API 这里有一个简单的表格嵌套Demo和大家...

EXTJS GridPanel 右键复制当前选中单元格

EXTJS中复制Grid中当前单元格的内容是一个比较常见的需求,最常见的解决方法就是添加新的css样式,具体可以参考:http://blog.csdn.net/dy_paradise/article/...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

extjs gridpanel 操作行 得到选中行

extjs gridpanel 操作行 得到选中行的列 var model = grid.getSelectionModel(); model.selectAll();//选择所有行...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)