Extjs 项目中对复选框的处理

1.定义一个panel，包含了复选框的设计

Ext.define('Smartec.grid.Panel', {
    alias: 'widget.smartecgrid',
    extend: 'Ext.grid.Panel',
    requires: ['Ext.selection.CheckboxModel'],    
    //height: 416,
    border: 1,    
    columnLines: true,    
    selModel: Ext.create('Ext.selection.CheckboxModel', {
        checkOnly: false
    }),    
    pageSize: 15,
    displayMsg: messages['ext.pagingtoolbar.displayMsg'],
    emptyMsg: messages['ext.pagingtoolbar.emptyMsg'],
    clearFilterMsg: messages['ext.pagingtoolbar.clearFilter'],
    //renderTo: 'center',
    
    initComponent: function() {
        var me = this;
        
        me.setStore();
        me.setDockItems(me.topDockedItems, me.store);
        me.setFilter(me.filterItems);
        
        me.callParent();
        Ext.getCmp('center').add(this);
    },
    
    //    afterRender: function() {
    //        var me = this;
    //        var center = Ext.getCmp('center');
    //        var minIcon = Ext.create('widget.splitbutton',{
    //            enableToggle: true,
    //            pressed: true,
    //            margin: 3,
    //            text:"abc",
    //            autoWidth: true,
    //            cmp: me        
    //        });
    //        
    //        minIcon.on('click', function() {
    //            this.cmp.show();
    //            Ext.getCmp('task').remove(this);
    //        });
    //        
    //        Ext.getCmp('task').add(minIcon);
    //    },
    
    onHide: function() {
        console.log('grid was hide...');        
    },
    
    setStore: function() {
        var me = this;     
       
        me.store = Ext.create('Ext.data.Store', {
            model: me.model,
            pageSize: me.pageSize,
              
            autoLoad: true,
            remoteSort: true
        });
       
    },
    
    setDockItems: function(topDockedItems, store) {
        var me = this;        
        var clearFilterBtn = {
            text: me.clearFilterMsg,
            height:24,
            iconCls:'icon-clearAll',
            handler: function() {
                me.filters.clearFilters();
            }
        };
        
       // topDockedItems.push(clearFilterBtn);
        
        var topDock = {
            dock: 'top',
            height:36,
            padding: '0 10px',            
            xtype: 'toolbar',
            items: topDockedItems
        };
   
        var bottomDock = {
            dock: 'bottom',
            height:30,
            xtype: 'pagingtoolbar',
            padding: '0 10px',
            store: store,
            displayInfo: true,
            displayMsg: me.displayMsg,
            emptyMsg: me.emptyMsg
        };
        
        me.dockedItems = [topDock, bottomDock];
    },
    
    setFilter: function(filterItems) {
        var me = this;
        
        if (filterItems) {
            var filter = {
                ftype: 'filters',
                encode: true,
                local: false,
                menuFilterText: messages['ext.filters.menuFilterText'],
                filters: filterItems
            };
        
            me.features = [filter];
        }
    }
});

2.grid复选框的样式：交替行效果

SendBillSerachGridPanel.superclass.constructor.call(this, {
   id : this.myid,
   title:"派车单查询",
   stripeRows : true, // 交替行效果
   iconCls : "goldenbean-customer",
   autoScroll:true,
   sm:new Ext.grid.CheckboxSelectionModel(), //就是加个这个就可以了
   columns : [new Ext.grid.RowNumberer(),new Ext.grid.CheckboxSelectionModel().......

3.读取复选框选中行的数据

var grid = this.up('gridpanel');  //得到grid
        var sm = grid.getSelectionModel();  //得到复选框的选中情况
        if(sm.hasSelection()){   //判断是否有选中
             Ext.MessageBox.show({   //弹出一个提示框
                 title:messages['ext.exceptionOrders.deleteOrder.confirm.message'],
                 msg:messages['ext.orders.operation.description.message'],
                 width:300,
                 buttons:Ext.MessageBox.OKCANCEL,
                 multiline:true,
                 icon:Ext.MessageBox.INFO,
                 fn:function(btn,comments){   //comments得到文本框输入的值
                    if (btn == 'ok') {
                          var rows = sm.getSelection();  //得到选中的行
                        var ids = "";
                        for (var i = 0; i < rows.length; i++) {
                            ids += rows[i].get("omsOrderSysId");  //得到对应列的数据
                            if (i < rows.length - 1) {
                                ids += ",";
                            }
                        }

Ext.Ajax.request({

                            url: path('请求的路径'),
                            params: {    //传递参数
                                ids: ids,
                                page:"exception",
                                comments:comments
                            },
                            success: function(json) {   //回调函数
                                var data = Ext.decode(json.responseText);
                                if(data.success){
                                    Ext.Msg.alert(messages['ext.tips.tip'], messages['ext.exceptionOrders.deleteOrders.success.message'], function(btn) {
                                        grid.getStore().load();
                                    });
                                }else{
                                    Ext.Msg.alert(messages['ext.tips.error'], messages['ext.exceptionOrders.deleteOrders.failure.message']);
                                }
                            },
                            failure: function() {
                                Ext.Msg.alert(messages['ext.tips.error'], messages['ext.tips.errorMsg']);
                            }
                        });
                    }
                 }
            });
        }
    }

4.getSelectionModel()  //通过selectionchange事件来判断是否有选中的复选框

me.getSelectionModel().on('selectionchange', function(thiz, selections){
            me.down('#selectOrderDetail').setDisabled(!(selections.length == 1));//查看订单详细选择一个异常订单
        });