Ext4下 grid 里面的checkbox,checkbox的事件及toolbar设置

１ 设置grid 每行checkbox

var myGridPanel =  new Ext.grid.GridPanel({
            selModel : new Ext.selection.CheckboxModel(),
             loadMask:true,
               autoScroll : true,
               id:'processDefineGridPanel',
               store : processDefinitionStore,
             stripeRows : true,
               columns : [

                ]

});

2 获取选中的checkbox的记录

var records=　myGridPanel.getSelectionModel().getSelection();
 for(var i=0;i<records.length;i++){
          var name=records[i].data["name"];

｝

3 checkbox监控及设置toolbar

var myGridPanel =  new Ext.grid.GridPanel({

    listeners : {
                      selectionchange : function(view,selections) {                    
                           if ( processDefineGridPanel.getSelectionModel().hasSelection() ){
                               Ext.getCmp("tbarDelInstances").setDisabled(false);
                               Ext.getCmp("tbarDelProcess").setDisabled(false);
                               Ext.getCmp("tbarDisableProcess").setDisabled(false);
                               Ext.getCmp("tbarEnableProcess").setDisabled(false);
                           } else {
                               Ext.getCmp("tbarDelInstances").setDisabled(true);
                               Ext.getCmp("tbarDelProcess").setDisabled(true);
                               Ext.getCmp("tbarDisableProcess").setDisabled(true);
                               Ext.getCmp("tbarEnableProcess").setDisabled(true);
                           }
                       },
//                       select:function(view,selections) {
//                       }
            
               }

}

4 toolbar 的设置

var myGridPanel =  new Ext.grid.GridPanel({

tbar :  
                    [
                        {
                            id : 'tbarAdd' ,
                            iconCls : 'myIconDefine', // myIconDefine like this .It is style  .myIconDefine {         background:url( <%=rootPath%>/image/delete.png ) no-repeat   !important;     }
                            tooltip:"Install Process",                        　
                            handler : function() {
                                // tool button event
                            }
                        }, '-',

　　　　　　　　　　]

});

5 grid 行颜色设置

var myGridPanel =  new Ext.grid.GridPanel({

viewConfig : {
                   forceFit : true,
                   scrollOffset : 0,
                   getRowClass : function(record,rowIndex,rowParams,store){  
                    if(record.data["state"]=="DISABLED"){  
                        return 'process-disable';   //style define like    .process-disable {          color: #FF0000;   }
                    }else{  
                        return 'process-enabled';  
                    }  
                }
               
               }

  }

})

6. checkbox事件

var setOldProcessForm = new Ext.form.Panel({
                    method : 'post',
                    id : 'displayOldProcess',
                    bodyPadding: 5,
                    width: 800,
                    height:150 ,
                    url : '<%=rootPath%>' + '/saveManagerProcessFlag.action',
                    defaults: {
                        anchor: '100%'
                    },
                    items: [
                        {
                            id : 'newest',
                            xtype : 'checkboxfield' ,
                            boxLabel: 'Is Display Old Process',
                            name: 'newest',
                            listeners: {
                                'change': function() {
                                    console.info("OK change");
                                },
                            }
                        },
                        {
                            id : 'oldstart',
                            xtype : 'checkboxfield' ,
                            boxLabel: 'Is Start Old Process',
                            name: 'oldstart',
                        },
 
                    ]
                     ,
                    buttons: [{
                        text: 'Reset',
                        handler: function() {
                            this.up('form').getForm().reset();
                        }
                    }, {
                        text: 'Submit',
                        formBind: true,  
                        handler: function() {
                            var form = this.up('form').getForm();
                            form.submit({
                                success: function(form, action) {
                                    Ext.Msg.alert('Success', "Update Success");
                                },
                                failure: function(form, action) {
                                    Ext.Msg.alert('Failed', "Update Fail");
                                }
                             });
                        }
                    }]
                     
                });