Extjs GridPanel用法详解

创建GridPanel

要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model:

//1.定义Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'phone', type: 'string' }
]
});

然后创建Store:

//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "GridHandler.ashx",
reader: {
root: "rows"
}
}
});

接下来才是GridPanel的代码:

//3.创建grid
var grid = Ext.create("Ext.grid.Panel", {
xtype: "grid",
store: store,
width: 500,
height: 200,
margin: 30,
columnLines: true,
renderTo: Ext.getBody(),
selModel: {
injectCheckbox: 0,
mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
selType: "checkboxmodel",
columns: [
{ text: '姓名', dataIndex: 'name' },
{
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: '电话', dataIndex: 'phone', editor: "textfield" }
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
listeners: {
itemdblclick: function (me, record, item, index, e, eOpts) {
//双击事件的操作
}
},
bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
});

这个GridPanel的效果如下:

在这个GridPanel中,我们可以通过复选框勾选数据行,可以编辑“年龄”和“电话”列,还可以对数据进行客户端排序。

Extjs GridPanel的列

Extjs GridPanel的列有多种类型,例如:文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。

下面是列的常用配置项:

  • xtype:列类型
  • text:列头显示的文字
  • dataIndex:绑定的字段名
  • width:宽度
  • flex:自动适应的宽度
  • sortable:是否可排序,默认为是
  • hideable:是否可隐藏,默认为是
  • locked:锁定列,将列锁定在grid的开头,当grid出现滚动条的时候该属性比较有用。默认为否
  • lockable:是否可锁定,默认为否
  • format:格式化字符串,常用于日期、数字的格式化。日期:'Y-m-d';日期时间:'Y-m-d H:i:s';数字:'0,000.00'(带有千位分隔符、保留两位小数)、'0.00'(保留两位小数),'0'(不保留小数)
  • renderer:自定义绘制方法,可以是Ext.util.Format中定义好的方法名称,也可以是自定义否function,该方法接收下面的参数:value、metadata、record、rowIndex、colIndex、store、view,并需要一个用来显示的返回值。
  • editor:编辑器,当使用编辑插件的时候才会起作用。

Extjs GridPanel行选择模型(SelectionModel)

控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下,selType为rowmodel,对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框,它通过点击行进行选中,默认为多选“MULTI”。

如果我们要使用复选框来选择行,我们需要使用下面的配置:

selType: "checkboxmodel",

然后,我们可以通过selModel来配置selType:

selModel: {
injectCheckbox: 0,
mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},

Extjs GridPanel行选择

除了界面操作来选中行,我们还可以通过代码来选中行:

//选择行,并保持其他行的选择状态
grid.getSelectionModel().select(records, true);
//选择所有
grid.getSelectionModel().selectAll();
//根据row index选择
grid.getSelectionModel().selectRange(startRow, endRow, true)

Extjs GridPanel获取选中行

获取选中行,仍然需要通过SelectionModel来完成:

var records = grid.getSelectionModel().getSelection();

Extjs GridPanel显示行号

默认情况下Extjs GridPanel是不显示行号的,我们需要手动添加行号列。

columns: [
{ xtype: "rownumberer", text: "序号", width:40 },
{ text: '姓名', dataIndex: 'name' },
{
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: '电话', dataIndex: 'phone', editor: "textfield" }
],

我们可以设置行号的列头和宽度。

Extjs GridPanel异步加载数据

Extjs GridPanel的异步加载数据是通过Store来实现的。我们之前已经介绍过Extjs Store的各种代理方式,可以参考我之前的文章:

异步加载通常采用ajax代理,例如我们代码中用到的:

//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "GridHandler.ashx",
reader: {
root: "rows"
}
}
});

服务器端返回的数据格式如下:

{
"rows": [
{
"name": "Tom",
"age": 12,
"phone": "1233455"
},
{
"name": "Jerry",
"age": 12,
"phone": "1233455"
},
{
"name": "Sinbo",
"age": 12,
"phone": "1233455"
},
{
"name": "Jack",
"age": 12,
"phone": "1233455"
},
{
"name": "Johnson ",
"age": 12,
"phone": "1233455"
}
],
"total": 5
}

Extjs GridPanel分页

当GridPanel中数据量大的时候,我们就需要使用分页了。

分页的实现由两部来完成,首先是在Store中添加pageSize配置项,用来确定每页显示多少行数据;然后需要为GridPanel添加PagingToolbar。

1. Store添加pageSize配置项

var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "GridHandler.ashx",
reader: {
root: "rows"
}
}
});

在分页参数加上之后,Extjs在执行ajax请求的时候会添加三个参数:

  • page:当前页
  • start:起始行的行号
  • limit:每页数据行数,默认为25;这个参数值就是我们设置的pageSize

2. GridPanel添加PagingToolbar

bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }

在完成这两项配置以后,GridPanel就可以使用分页了。

Extjs GridPanel列编辑

Extjs GridPanel可以方便的实现列编辑。要实现这个功能需要两步:

1. 添加GridPanel的编辑插件

plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],

2. 为需要编辑的列指定编辑器

columns: [
{ xtype: "rownumberer", text: "序号", width:40 },
{ text: '姓名', dataIndex: 'name' },
{
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: '电话', dataIndex: 'phone', editor: "textfield" }

编辑器可以是一个field的配置,也可以是一个xtype。

对于编辑后的单元格,会在左上角出现一个红色的标识,说明该数据是编辑过的,要想去掉这个红色箭头,需要调用record的commit()方法。

grid.on('edit', function (editor, e) {
// commit the changes right after editing finished
e.record.commit();
});

除了单元格编辑外,Extjs还支持行编辑功能,只需要将插件替换为RowEditing即可,此处不再进行演示。

Extjs GridPanel选中单元格内容

在默认情况下,Extjs GridPanel不允许进行选中单元格中的内容,由于不能选中,我们就不可能来复制单元格中的内容。如果要实现这种功能,我们需要通过viewConfig来实现。

代码如下:

viewConfig:{
stripeRows:true,//在表格中显示斑马线
enableTextSelection:true //可以复制单元格文字
}

禁止显示列头部右侧菜单

Extjs GridPanel的列,当我们点击列头的时候,会出现一个菜单:

如果我们要禁用这个菜单,可以将每个column定义属性menuDisabled指定为true,代码如下:

{header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}

Ext GridPanel的更多相关文章

  1. Ext.GridPanel 用法总结(一)—— Grid基本用法

    Ext.GridPanel 用法总结(一)—— Grid基本用法 摘自:http://www.cnblogs.com/luluping/archive/2009/08/01/1536645.html ...

  2. 转:Ext GridPanel根据条件显示复选框

    Ext GridPanel实现复选框选择框: var selectModel = new Ext.grid.CheckboxSelectionModel({ singleSelect : false ...

  3. EXT gridPanel 添加图片

    var workAreaGrid = new Ext.grid.GridPanel({ region: 'west', title: '工作面预警结果', store: wkSto, width: , ...

  4. ext: gridpanel中的点击事件的参数是什么意思?

    listeners: {      // 当用户单击列表项时激发该函数      itemclick: function(view, record, item, index, evt)  //①    ...

  5. Ext.NET 4.1.0 GridPanel数据分页

    针对大量数据在前端展示,需要进行分页显示,这里我使用的数据量为100万,数据存储在MongoDb中(也可以存储在本地文件或其它数据库中).最终显示效果如下: 步骤如下: 1.新建程序并配置,详见htt ...

  6. 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  7. 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  8. Ext.Net学习笔记17:Ext.Net GridPanel Selection

    Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如 ...

  9. Ext.Net学习笔记12:Ext.Net GridPanel Filter用法

    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...

随机推荐

  1. UI数据库

    一.数据库 SQL: SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集, 是一种功能齐全的数据库语言. 二.数据库管理系统 数据 ...

  2. Android开源框架:Universal-Image-Loader解析(三)DiskCache

  3. 移动测试主要使用的测试框架,基于python

    1.uiautomator google自己的测试框架,可以跨应用测试, 语言支持java,python也可以在GitHub上找到封装的包,去调用uiautomator. 2.Robotium jav ...

  4. 百度star编程赛-练习1

    ztr loves math http://acm.hdu.edu.cn/showproblem.php?pid=5675 显然:4 ^ n * (a + b) * (a -b) #include & ...

  5. 7.2.3 使用RenderTargetBitmap类生成图片

    RenderTargetBitmap类可以将可视化对象转换为位图,也就是说它可以将任意的UIElement以位图的形式呈现.那么我们在实际的编程中通常会利用RenderTargetBitmap类来对U ...

  6. 查出重复的数据---------oracle

    select chcod, count(1) from a group by chcod having count(1) > 1

  7. 分享一些DICOM数据下载网站

    医院的DICOM数据轻易不让拷出来,所以这里列出一些医学数据,但不局限于DICOM数据网址,供大家下载. 斯坦福大学体数据库(RAW DATA) http://graphics.stanford.ed ...

  8. Installshield如何实现升级覆盖文件

    这个简单的问题,问过的人不计其数,但是反馈者寥寥,并且往往不能顺利达成目标,只能采取复杂方式来实现,这里吐槽一下IS的帮助文档,很庞大很全,但是有些小技巧就是不讲. 网友冰雪孤独哥今天提供了及时的反馈 ...

  9. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

  10. cocoapods版本更新

    1.下载某些三方库时,pod install会出现错误 $ pod install Analyzing dependencies [!] The version of CocoaPods used t ...