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));//查看订单详细选择一个异常订单
});