Ext.GridPanel 用法总结（一）—— Grid基本用法

GridPanel类是基于基础列表接口具代表性的主要实现类。也是最常用的Ext组件之一。

一：首先定义grid的数据源

view plaincopy to clipboardprint?
//初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init(); //显示提示信息
var pageSize=10;//定义每页显示的行数
//定义数据字段
var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];
//定义数据源
journal_store = new Ext.data.Store({
// 获取数据
proxy:new Ext.data.HttpProxy(
{
url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址
method:"POST"
}),
//解析json
reader:new Ext.data.JsonReader(
{
fields:fields,
root:"data",
id:"roleId",
totalProperty:"totalCount" //总的数据条数
})
});
//根据参数加载数据
journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});
//初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init(); //显示提示信息
var pageSize=10;//定义每页显示的行数
//定义数据字段
var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];
//定义数据源
journal_store = new Ext.data.Store({
// 获取数据
proxy:new Ext.data.HttpProxy(
{
url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址
method:"POST"
}),
//解析json
reader:new Ext.data.JsonReader(
{
fields:fields,
root:"data",
id:"roleId",
totalProperty:"totalCount" //总的数据条数
})
});
//根据参数加载数据
journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});

二：定义其选择列、行号、列等

view plaincopy to clipboardprint?
//--------------------------------------------------列选择模式
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});
var index= new Ext.grid.RowNumberer();//行号
//--------------------------------------------------列头
var colModel = new Ext.grid.ColumnModel
(
[
index,
sm,
{header:"序号",width:100,dataIndex:'journal_id',sortable:true},
{header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},
{header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},
{header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},
{header:"是否核心",width:110,dataIndex:'is_core',sortable:true},

{header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}
]
);
//--------------------------------------------------列选择模式
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});
var index= new Ext.grid.RowNumberer();//行号
//--------------------------------------------------列头
var colModel = new Ext.grid.ColumnModel
(
[
index,
sm,
{header:"序号",width:100,dataIndex:'journal_id',sortable:true},
{header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},
{header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},
{header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},
{header:"是否核心",width:110,dataIndex:'is_core',sortable:true},

{header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}
]
);

三：定义表格grid

view plaincopy to clipboardprint?
journal_grid = new Ext.grid.GridPanel
(
{
id:'id_journal_grid', //grid的id
autoHeight:true,
autoWidth:true,
sm:sm,
cm:colModel, //行列
loadMask:true,

store:journal_store, //数据源

trackMouseOver:true, //鼠标特效
autoScroll:true,
stripeRows:true,
viewConfig:{
columnsText:"显示/隐藏列",
sortAscText:"正序排列",
sortDescText:"倒序排列",
forceFit:true
},
journal_grid = new Ext.grid.GridPanel
(
{
id:'id_journal_grid', //grid的id
autoHeight:true,
autoWidth:true,
sm:sm,
cm:colModel, //行列
loadMask:true,

store:journal_store, //数据源

trackMouseOver:true, //鼠标特效
autoScroll:true,
stripeRows:true,
viewConfig:{
columnsText:"显示/隐藏列",
sortAscText:"正序排列",
sortDescText:"倒序排列",
forceFit:true
},

四：定义工具栏

view plaincopy to clipboardprint?
tbar: //工具条
[
{
text: '刷新',
cls: 'x-btn-text-icon details',

handler: function(btn, pressed)
{//重置查询条件
Ext.getCmp("QueryForm").findById('journalName').reset();
Ext.getCmp("QueryForm").findById('journalOrganizer').reset();
Ext.getCmp("QueryForm").findById('journalLevel').reset();
Ext.getCmp("QueryForm").findById('JournalIsCore').reset();
journal_store.load({params:{start:0,limit:pageSize}});
//数据源从新加载
}
},
'-',
{
text: '添加',
handler: function(btn, pressed)
{
AddJournalInfo(); //添加新的角色信息

}
}, '-',
{
text: '编辑',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else if(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}else if(row.length==1)
{
EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息
}
}
}, '-',
{
text: '删除',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections(); //获取选中的行
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else{
Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
if(btn=="yes")
{

DeleteJournalInfo(row);//删除角色信息
}
else
{

}
})
}
}
},'-',
{
text: '综合查询',
handler: function(btn, pressed)
{

Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开

}
}, '-'
]
tbar: //工具条
[
{
text: '刷新',
cls: 'x-btn-text-icon details',

handler: function(btn, pressed)
{//重置查询条件
Ext.getCmp("QueryForm").findById('journalName').reset();
Ext.getCmp("QueryForm").findById('journalOrganizer').reset();
Ext.getCmp("QueryForm").findById('journalLevel').reset();
Ext.getCmp("QueryForm").findById('JournalIsCore').reset();
journal_store.load({params:{start:0,limit:pageSize}});
//数据源从新加载
}
},
'-',
{
text: '添加',
handler: function(btn, pressed)
{
AddJournalInfo(); //添加新的角色信息

}
}, '-',
{
text: '编辑',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else if(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}else if(row.length==1)
{
EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息
}
}
}, '-',
{
text: '删除',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections(); //获取选中的行
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else{
Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
if(btn=="yes")
{

DeleteJournalInfo(row);//删除角色信息
}
else
{

}
})
}
}
},'-',
{
text: '综合查询',
handler: function(btn, pressed)
{

Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开

}
}, '-'
]

五：设置分页

view plaincopy to clipboardprint?
//分页
bbar:new Ext.PagingToolbar({
store:journal_store, //数据源
pageSize:pageSize,
//显示右下角信息
displayInfo:true,
displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',
emptyMsg:"No results to display",
prevText:"上一页",
nextText:"下一页",
refreshText:"刷新",
lastText:"最后页",
firstText:"第一页",
beforePageText:"当前页",
afterPageText:"共{0}页"
})
});
//分页
bbar:new Ext.PagingToolbar({
store:journal_store, //数据源
pageSize:pageSize,
//显示右下角信息
displayInfo:true,
displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',
emptyMsg:"No results to display",
prevText:"上一页",
nextText:"下一页",
refreshText:"刷新",
lastText:"最后页",
firstText:"第一页",
beforePageText:"当前页",
afterPageText:"共{0}页"
})
});

六：设置右键菜单

view plaincopy to clipboardprint?
//为右键菜单添加事件监听器
journal_grid.addListener('rowcontextmenu',rightClickFn);
var rightClick = new Ext.menu.Menu
(
{
items:
[
{
id: 'rMenu1',
handler:AddJournalInfo,//点击后触发的事件
text: '增加角色'
},
{
id:'rMenu2',
text:'编辑角色',
handler:function()
{
JournalEdit();
}
},
{
id:'rMenu3',
text:'删除角色',
handler: function()
{
JournalDelete();
}
}

]
}
);

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/goldlqch/archive/2009/05/25/4214178.aspx