效果图:
示例:
<%@ page contentType="text/html; charset=utf-8"%>
<%
String brandid = request.getParameter("documentid");
String panelid = request.getParameter("panelid");
String gridId = request.getParameter("gridId");
%>
<script language='javascript'>
Ext.onReady(function(){
var panelid = '<%=panelid%>';
var panel = Ext.getCmp(panelid);
var parentid = Ext.getCmp(panelid).ownerCt.params;
// 存储字段
var fields = [
{name:'id', mapping:'id'},
{name:'f_name', mapping:'f_name'},
{name:'f_name_en', mapping:'f_name_en'},
{name:'f_name_py', mapping:'f_name_py'},
{name:'f_report_temp_name', mapping:'f_report_temp_name'}
];
var sm=new Ext.grid.CheckboxSelectionModel();
// 列表字段
var columns = [sm,{
id : 'id',
dataIndex : 'id',
width:70,
header : '编号'
},{
id : 'f_name',
dataIndex : 'f_name',
header : '品牌中文名称',
width:120
},{
id : 'f_name_en',
dataIndex : 'f_name_en',
width:120,
header : '品牌英文名称'
},{
id : 'f_name_py',
dataIndex : 'f_name_py',
width:120,
header : '品牌名称全拼'
},{
id : 'f_report_temp_name',
dataIndex : 'f_report_temp_name',
width:120,
header : '商品品类'
}];
// 数据访问
var store = new Ext.data.DirectStore({
directFn : BrandDirect.getBrandList,
baseParams : {'limit':50, 'start':0,'value':'','brandid':<%=brandid%>},
root : 'results',
totalProperty : 'totals',
idProperty : 'id',
sortInfo: {field:'id', direction: 'DESC'},
fields:fields
});
// 功能条
var btnRefresh = new Ext.Action({
text : '刷新',
iconCls : 'icon-sys-refresh',
handler : function(){
panel.refresh();
}
});
var btnSave = new Ext.Action({
text : '保存',
iconCls : 'icon-sys-save',
handler : function(){
panel.save();
}
});
var searchForm = new Ext.form.TextField({
width : 100,
emptyText : '输入快速检索字符',
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var value = searchForm.getValue();
store.baseParams.limit = pagebar.pageSize;
store.baseParams.start = 0;
store.baseParams.value = value;
if(Ext.isDefined(value) && value != ''){
store.load();
}
}
}
}
});
var btnsearch = new Ext.Action({
text : '快速检索',
iconCls : 'icon-sys-query',
handler : function(){
var value = searchForm.getValue();
store.baseParams.limit = pagebar.pageSize;
store.baseParams.start = 0;
store.baseParams.value = value;
if(Ext.isDefined(value) && value != ''){
store.load();
}
}
});
var tools = [btnSave, '-', btnRefresh,'-',searchForm,'-',btnsearch];
//分页
var pagebar = new Ext.PagingToolbar({
firstText : '首页',
lastText : '尾页',
nextText : '下一页',
prevText : '上一页',
refreshText : '刷新',
beforePageText : '第',
afterPageText : '页,共 {0} 页',
displayMsg : '共 {2} 条,当前显示 {0} 到 {1} 条',
emptyMsg : '没有符合条件的数据',
pageSize: 50,
store: store,
displayInfo: true,
items : [
'-',
'每页显示:',
new Ext.form.ComboBox({
editable : false,
triggerAction: 'all',
width : 50,
store : [10, 20, 30, 40, 50],
value : 50,
listeners : {
'select' : function(c, record, index){
grid.getBottomToolbar().pageSize = c.getValue();
grid.getBottomToolbar().changePage(1);
}
}
})
],
plugins: new Ext.ux.ProgressBarPager({defaultText:'正在装载数据...'}),
listeners : {
'beforechange' : function(a, b){
store.baseParams.limit = b.limit;
store.baseParams.start = b.start;
}
}
});
// 表格对象
var grid = new Ext.grid.GridPanel({
border : false,
sm:sm,
columns : columns,
autoExpandColumn:'f_name',
enableHdMenu:true,
store : store,
tbar : tools,
contextMenu : new Ext.menu.Menu({items:tools}),
bbar: pagebar,
listeners : {
'rowcontextmenu' : function(g, rowIndex, e){
g.CheckboxSelectionModel().selectRow(rowIndex);
g.contextMenu.showAt(e.getXY());
}
}
});
// 刷新
panel.refresh = function(){
store.reload();
}
// 保存属性修改
panel.save = function(){
var records = grid.getSelectionModel().getSelections();
if(records.length > 0){
var ids = '';
for(var i=0;i<records.length;i++){
ids += records[i].data.id+',';
}
BrandDirect.addChildBrand(ids,<%=brandid%>,function(result, e){
if(result && result.success){
MixkyApp.showInfoMessage('数据已保存','提示信息');
}else{
MixkyApp.showErrorMessage(result.message, '错误提示');
}
});
}
Ext.getCmp(parentid).getStore().reload();
MixkyApp.desktop.closeDocument("mkSckf.docDeatailInfo",<%=brandid%>);
};
panel.add(grid);
panel.doLayout();
panel.refresh();
});
</script>