Ext4.2 Gird

Gird:

gird主要由 store、cm 、tbar、loadMask 、bbar 几个核心。

var girdInfo = new Ext.grid.GridPanel({
            id : 'XXX',
            title : '列表',
            frame : true,
            width : '100%',
            height : height-120,
            store : gridStore,
            cm : cm,
            tbar:[{text : 'XXX',iconCls : 'find',handler:function(){
                showDetail();
            }}],
            viewConfig : {
                forceFit : true,
                emptyText : '没有匹配的数据'
            },
            remoteSort : true,
            loadMask : waitMask,
            bbar : bbarpageSize,
            listeners : {
                beforerender : function(g) {}
            }
        });

Ext Gird里序号显示

在colums添加：

{

            header: '序号',

            xtype: 'rownumberer',

            align:'center',

            width:60,

            renderer: function(value,metadata,record,rowIndex){

                 var store = Ext.getCmp("Grid1").getStore();

                var currentPage = store.currentPage;

                return (currentPage-1)*30+rowIndex+1;

            }

        },

{header:"行号",width:50,align:'center',renderer : function(value, cellmeta, record, rowIndex) {

                               var store = record.store;

                               var params = store.lastOptions.params;

                               return params.start+1+rowIndex;

       }

},

 

Gird复选框是否展示：单选/多选

单选

selType: "checkboxmodel",

多选

selModel: Ext.create("Ext.selection.CheckboxModel", {

            mode: "SIMPLE"

        }),

或者

selModel: {

            selection: "rowmodel",

            mode: "MULTI"

 },

 

Gird复选框默认选中

//model.selectRows(rows);//选择指定一些行,传递数组如[1,3,5],则分别选择1,3,5行

//model.selectFirstRow();//选择第一行

// model.selectAll();//选择所有行

//model.clearSelections();//清空所有选择

实例：

1. 获取需要选中的id
2. 通过getById()方法 获取对应index值，然后放入数组中
3. 使用select()方法，将数组中的相应index选中

var ids = XXX;

ids = ids.substring(0, ids.length - 1);

if(ids!=""){

       var indexNum = [];

       var num=ids.split(",");

       for (var i = 0; i < num.length; i++) {

              indexNum.push(itemGridStore.getById(parseInt(num[i])));

       }

       itemGridStore.load({

              callback: function(records, options, success){

                     Ext.getCmp('itemGrid').getSelectionModel().select(indexNum);//选中指定行

              }

       });

}

实例：

1. 使用reload方法重新提交上一次请求加载
2. 在callback里通过getCmp()方法获取到store的值
3. 通过count（）和store.getAt(i)的get(“id”)和get（”index”）获取到相应的数据

Ext.getCmp('ySiteGrid').getStore().reload({

params : {

       deviceType : info.data.deviceTypeId,

       policeId : policeId

},

callback: function(records, options, success){

       var store = Ext.getCmp('ySiteGrid').getStore();

       for(var i = 0 ; i<store.getCount();i++){

              if(info.data.deviceId == store.getAt(i).get("id")){

                     Ext.getCmp('ySiteGrid').getSelectionModel().select(store.getAt(i).index);//选中指定行

              }

       }

}

});

 

Gird隔行变色

 

viewConfig : {

                    getRowClass : function(record, rowIndex, rowParams, store) {

                        if(rowIndex%2!=0){

                            return 'grid_colorChange;

                        }

                    }

 },

<style>

  .grid_colorChange {

      background-color: #f1f1f1;

  }

 </style>

或

tr.x-grid-record-red .x-grid-td {
background: #ADDFF3;
}

viewConfig: {
loadMask: false, //这个是屏蔽加载该grid的时候，屏幕中出现的“loading..”图标
getRowClass: function(record, rowIndex, rowParams, store){
  if (record.get("pluginId") == "1505") {        
     return 'x-grid-record-red';
  } else {
     return '';
  }
    }
}

 

Ext Gird改变单元格颜色

.x-grid-record-red .x-grid-cell-inner {

            background: rgba(245, 41, 30, 0.84);

}

 

renderer: function(value, metadata, record,rowIndex){

       metadata.tdCls='x-grid-record-red';

       return value;

}

 

在弹出框gird中 滚动条不显示，gird内容展示不全

最后是通过调整width 和height 属性解决问题

 

Gird Store

items:new Ext.Button({text:'查询',width:60,handler:function(){

            var personName = Ext.getCmp('maintainer_name').getValue();

            gridStore.baseParams={ersonName: personName, personType:2, };

            gridStore.reload({params:{ start:0, limit:gridLimit}});

}})