GridPanel组件（Ext.grid.GridPanel）logogram：Ext.grid.Panel | xtype:gridpanel
此类派生自Ext.Panel，创建表格需要两个必须的对象，columns和Ext.data.Store。columns用于指示GridPanel表格的列的基本信息，表格显示在页面上，其列的信息需要通过columns配置，Ext.data.Store是GridPanel的数据来源。
配置columns : Json
columns数组里可配置Json，每个Json表示一列。在Json里配置列信息。
var columns = [
{ xtype: "rownumberer" },//第一列显示行号。同时此行号也是作为该条记录在Store中的索引，可通过store的removeAt(rowIndex)删除此记录
{ header: "编号", dataIndex: "ID" }, //第二列的列头和该列在store中对应的列名
//……
]
配置.config
//指示当前列宽度，默认100px
sortable : bool
//指示当前列是否可以排序，默认true。禁用后排序菜单会显示为不可用
menuDisabled : bool
//指示是否禁止当前列的表头菜单。禁用后表头不再显示菜单。禁用menuDisabled 并不会阻止排序按钮的显示，除非同时设置menuDisabled和sortable
xtype : 子组件类型名称（小写）
//为表格添加某些组件
editor : { }
//如果表格带有列编辑器时，指示列显示的是哪种表单子组件，并对验证做出指示
renderer：fn(columnValue,cellMeda,record)
//fn函数用于临时渲染一些自定义的列效果。
//fn的参数
//columnValue：列数据。
//cellMeda：单元格td（可获取id和css）
//record：当前列所在行的行数据对象，每个td的数据通过当前record[columnID]或record.get("列名")的形式获取
//该函数必须返回一个值，这个值会自动替换当前列的数据，如果不返回值就会无效
//示例：
var columns = [
{ header: "编号", dataIndex: "ID",sortable:false },//列1
{ header: "姓名", dataIndex: "Name" },//列2
{ header: "出生日期", dataIndex: "BothDate" },//列3
{ header: "性别", dataIndex: "Gender", renderer: function (columnValue, metadata) { columnValue = '<font color="red">' + columnValue + '</font>'; return columnValue; } },//列4
{ header: "自我介绍", dataIndex: "SelfIntroduction" }//列5
];
//替换后的效果如下图
配置Ext.data.Store
GridPanel的数据来源可以是本地，也可以是远程数据。参看：Ext.data.Store加载数据
读取XML文件
<data>
<employee>
<ID>1</ID>
<employeeName>sam</employeeName>
<age>32</age>
<gender>0</gender>
<IsMarried>true</IsMarried>
</employee>
<employee>
<ID>2</ID>
<employeeName>korn</employeeName>
<age>22</age>
<gender>1</gender>
<IsMarried>false</IsMarried>
</employee>
<employee>
<ID>3</ID>
<employeeName>leo</employeeName>
<age>32</age>
<gender>0</gender>
<IsMarried>false</IsMarried>
</employee>
<employee>
<ID>4</ID>
<employeeName>neil</employeeName>
<age>58</age>
<gender>1</gender>
<IsMarried>false</IsMarried>
</employee>
</data>
//数据模型
Ext.define("EmployeeModel", {
extend: "Ext.data.Model",
fields: [
{ name: "ID", type: "int" },
{ name: "employeeName", type: "string" },
{ name: "age", type: "int", convert: null },
{ name: "gender", type: "int" },
{ name: "IsMarried", type: "boolean", defaultValue: true, convert: null }
]
});
//存储器
Ext.create("Ext.data.Store", {
storeId: "EmployeeStore",
model: "EmployeeModel",
autoLoad: true,
proxy: {
type: "ajax",
url: "Data.xml",
reader: {
type: "xml",
root: "data", //根节点
record: "employee" //作为记录的节点
}
}
});
//表格
Ext.create("Ext.grid.Panel", {
renderTo: Ext.get("box"),
title: "员工信息",
width: 500,
store: "EmployeeStore",
columns: [
{ header: "员工编号", dataIndex: "ID" },
{ header: "员工姓名", dataIndex: "employeeName" },
{ header: "员工年龄", dataIndex: "age" },
{ header: "员工性别", dataIndex: "gender" },
{ header: "员工婚否", dataIndex: "IsMarried" }
]
});
});
表格选择模式
当用户使用鼠标单击表格时，他可能希望单击一行时选中该行，或单击某个单元格时只选中单元格。这个效果可以通过配置gridPanel的selModel来完成。
selModel指向一个Ext.selection.Model的实例，这是一个抽象的类，不能直接new，它表示选择模式，派生自这个类的有三个重要的代表选择模式的类，分别是：Ext.selection.RowModel、Ext.selection.CellModel、Ext.selection.CheckboxModel，分别表示行选择模式、列选择模式、复选框选择模式。这是一个重要的类型，如果你想要获得选中的行或选中的单元格的数据，这就需要首先获得Ext.selection.Model，以便调用它提供的一系列的方法去获得数据。
selType："cellmodel"（单击选择单元格）| "rowmodel"（单击选择整行）| "checkboxmodel"（显示复选框）
//选择的模式
mode："SINGLE"（单选） | "SIMPLE"（多选）| "MULTI"（按住Ctrl多选）
//在选择模式上进一步设置，注：单元格模式无法多选
checkOnly
//是否必须手动勾选复选框才选中行，因为在复选框模式下，鼠标选中行就可以自动勾选复选框
ignoreRightMouseSelection
//是否右键点击时，只能选中一次
injectCheckbox ：'first' | 'last' | cellIndexNumber
//列头的复选框显示在哪个列索引处
示例：
selModel: {
selType: 'rowmodel', //单击选中行
mode: "MULTI" //按Ctrl键单击多选
},
});
Ext.selection.Model
//获取被选中的行或单元格的总数
var selModel = Ext.getCmp("gridpanel").getSelectionModel();//getCmp方法根据组件ID获取组件对象
alert(selModel.getCount());
getSelection()
//获取被选中行的行集合对象。返回一个 Ext.data.Model[ ]数组。
//示例：给grid绑定selectionchange事件
selectionchange: function (selectionModel, selectedRow) {
if (selectionModel.getSelection().length != 0) {
//有记录被选中时的操作……
}
}
selected
//获取被选中行的行集合对象。此属性等同于 getSelection()方法。selected属性或getSelection()方法都返回一个 Ext.data.Model[ ]数组。
//示例：
var selModel = Ext.getCmp("gridpanel").getSelectionModel();//获得选择模式
selRows = selModel.selected;//获得被选中的行集合
selRows.each(function (e) {
alert(e.get("Name"));//获取当前行的Name列的数据
});
isSelected(dataModel)
//当前记录是否被选中。
select(dataModel,bool,bool)
//选中参数指定的记录，参数2和3可选，参数2为真时记住存在的选项，如果复选框所在的容器注册了选择事件，参数3为真时将略过该事件，不去触发它。
deselect(dataModel,bool)
//取消选中参数指定的纪录，参数2可选，如果复选框所在的容器注册了取消选择事件，参数2为真时将略过该事件，不去触发它。
selectAll()
//选中所有记录
deselectAll()
//取消选中所有记录
//完整例子：
<input id="getValueBtn" type="button" value="getRow" />
//以下代码省略gridPanel的创建，只给出获取在复选框模式下通过点击按钮得到被选中行的数据
Ext.get("getValueBtn").on("click", function () {
var rowMsg = "";
var Rows = gridPanel.getSelectionModel().selected;
if (Rows.getCount() == 0) {
Ext.MessageBox.alert("", "未选中任何行");
return;
}
Rows.each(function (rowItem) {
rowMsg += "</br>选中行的信息：" + rowItem.get("ID") + "," + rowItem.get("Name") + "," + rowItem.get("Gender") + "</br>";
});
Ext.MessageBox.alert("", rowMsg);
});
//删除记录：
Ext.get("btn").on("click", function () {
Ext.MessageBox.confirm("提示", "确认删除?", function (e) {
if (e == "yes") {
var selModel = Ext.getCmp("gridpanel").getSelectionModel();//获得选择模式
selRows = selModel.selected;//获得被选中的行集合
selRows.each(function (e) {
dataStore.remove(e)//从数据源里移除数据
});
}
});
});
//插入新行：
Ext.get("btn").on("click", function () {
//创建新行并赋默认值
var newRow = { ID: 0, Name: "输入姓名", BothDate: "输入生日", Gender: "输入性别", SelfIntroduction: "输入自我介绍" };
//在索引0的位置插入新行
dataStore.insert(0,newRow);
});
GridPanel
配置.config
//数据来源是哪个数据存储器
forceFit : true
//指示表格是否正好容纳所有列数据，列自适应宽。
scrollOffset: 0
//不为表格最右边可能显示的滚动条留任何区域
enableColumnMove : true
//指示列名是否可前后拖动 。
enableColumnResize : true
//指示列名是否可前后拉动更改列宽度 。
loadMask : false
//指示数据加载完成之前显示遮罩动画 。
selModel : Ext.selection.Model
//指示表格选择模式。
tbar : Ext.toolbar.ToolbarView（xtype: toolbar）
//在表格顶部增工具栏组件。
bbar : Ext.toolbar.ToolbarView（xtype: toolbar）
//在表格底部增加工具栏。
//如：
bbar:new Ext.PagingToolbar(),//显示一个分页工具栏。
//分页工具栏示例：
var bottomTool = new Ext.PagingToolbar({
store: dataStore,
displayInfo: true,//是否显示分页的额外信息
displayMsg: "显示第{0}条-{1}条记录，一共{2}条",//displayInfo为true时，此属性才能生效
emptyMsg: "无记录"
});
plugins : [ ]
//指示gridPanel所使用的插件。
enableDragDrop : bool
//是否可拖放表格记录。需要同时配置viewConfig。
viewConfig : { }
//表格的视图配置。
//示例：
//以下创建了两张表格，通过配置拖放，实现了两张表数据可跨表拖放。而且表自身内部的记录在其容器中也可以随意拖放。注意必须使用不同的数据源，否则跨表拖放无效。
new Ext.grid.GridPanel({
renderTo: "box",
width: 502,
forcefit:true,
store: dataStore,
columns: columns,
enableDragDrop:true,
viewConfig: {
plugins: {
ptype:"gridviewdragdrop"
}
}
});
new Ext.grid.GridPanel({
renderTo: "box2",
width: 502,
forcefit: true,
store: dataStore2,
columns: columns,
enableDragDrop: true,
viewConfig: {
plugins: {
ptype: "gridviewdragdrop"
}
}
});
features : [ { } , { } ]
//指示表格的各种特性。比如表头菜单出现分组功能。API可查：Ext.grid.feature.GroupingView 或 ftype: grouping。
//示例：
//ftype: grouping是类似xtype:"控件名"的简写形式，全名：Ext.grid.feature.GroupingView
new Ext.grid.GridPanel({
features: [{ ftype: "grouping", groupByText:"按此列分组"}]
});
方法.method
//刷新表格视图
update(string)
//刷新组件的内部区域，将string填入面板。
getSelectionModel()
//获取表格选择模式，返回一个派生于抽象类Ext.selection.Model类型的选择模式对象。
//该对象可能是Ext.selection.RowModel、Ext.selection.CellModel、Ext.selection.CheckboxModel，这得根据你创建gridPpanel时所指定的选择模式而定。
//Ext.selection.Model实例提供isSelected(data.Model)方法，测试参数指定的记录是否处于选中状态，如：gridPanel.getSelectionModel().isSelected(record)
事件.event
//右键事件，当用户在gridPanel里使用右键时触发。
selectionchange: function (selectionModel, selectedRow)
//选择发生变化时触发
//示例：
//右键点击grid时创建右键菜单
Ext.create("Ext.grid.Panel", {
//……
listeners: {
itemcontextmenu: function (view,record,item,index,e) {
e.preventDefault();
Ext.create("Ext.menu.Menu", {
id: "contextmenu",
items: [
{
text: "全选",
handler: function () {
}
},
{
text: "反选",
hanlder: function () {
}
}
],
listeners: {
deactivate: function (menuSelf) {
menuSelf.destroy(); //消失后销毁自身
}
}
});
Ext.getCmp("contextmenu").showAt(e.getXY()); //显示在鼠标右键点击处
}
}
});
例子：在复选框模式下，右键菜单实现全选、反选、取消选择
构造适用于gridPanel、TreePanel的全选反选取消的右键菜单
hostComponent：右键菜单的宿主（一个gridPanel或TreePanel）
如果IsComplete为true，则返回一个实现全选反选取消的完整菜单
否则只返回一个实现全选反选取消的菜单子项，在函数外部可调用Ext.menu.Menu的add方法将子项添加到右键菜单中
*/
function createSelectContextMenu(hostComponent, event, IsComplete) {
event.preventDefault();
var selModel = hostComponent.getSelectionModel();
var records = hostComponent.getStore().getRange();
//创建菜单子项
var items = [
{
text: "全选",
handler: function () {
selModel.selectAll();
}
},
{
text: "反选",
handler: function () {
records.forEach(function (r) {
var isSelected = selModel.isSelected(r);
if (isSelected) {
selModel.deselect(r);
}
else {
selModel.select(r, true);
}
});
}
},
{
text: "全部取消",
handler: function () {
selModel.deselectAll();
}
}
];
//创建完整菜单
var contextmenu = Ext.create("Ext.menu.Menu", {
items:items,
listeners: {
deactivate: function (menuSelf) {
menuSelf.destroy(); //消失后销毁自身
}
}
});
return IsComplete?contextmenu:items;
}
/*-----测试：获取子项-----*/
itemcontextmenu: function (view, record, item, index, e) {
var menu=Ext.create("Ext.menu.Menu", {
items: [
{ text : "其它功能" }
],
listeners: {
deactivate: function (menuSelf) {
menuSelf.destroy(); //消失后销毁自身
}
}
});
menu.add(createSelectContextMenu(this,e));
menu.showAt(e.getXY());
}
/*-----测试：获取全部-----*/
itemcontextmenu: function (view, record, item, index, e) {
var menu=createSelectContextMenu(this,e,true);
menu.showAt(e.getXY());
}
例子：鼠标划过列显示列信息
gridPanel.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
if (view.tip == null) {
view.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
renderTo: Ext.getBody(),
width: 200
});
};
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(view.cellSelector).cellIndex];
view.el.clean();
view.tip.update(record.data[column.dataIndex]);
});
其它参考