首页 > 代码库 > ExtJs之列表(grid)
ExtJs之列表(grid)
--renderers渲染器
可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子先看下renderer: function()里的参数
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
}
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。
3.record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。
4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。
--Selection Models选择模型
关于Ext.grid.plugin.CellEditing和Ext.grid.plugin.RowEditing的区别CellEditing 编辑不可保存
RowEditing 编辑可保存
有时你只是想查看渲染到视图上的数据，但是通常它就包含有必要交互或更新的数据。 Grid使用了一个称为选择模型(Selection Model)的概念，这是一种机制，用于在grid中选择部分数据。 选择模型的两个主要类型是 RowSelectionModel，选定整行， 以及 CellSelectionModel，选定单个单元格。
在默认情况下Grid使用行选择模型，但是可以像这样很容易的对其进行定制:
Ext.create(‘Ext.grid.Panel‘, {
selType: ‘cellmodel‘,
store: ...
});
通过指定cellmodel改变了两件事情。首先，现在某个单元格上单击选择只是该单元格 (使用rowmodel将选择整个行)，再者， 键盘导航将走单元格，而不是行与行。 基于单元格的选择模型通常与编辑器一起使用。
--Editing编辑器
若要支持单元格内编辑，我们还要在grid中指定selType配置项使用‘cellmodel‘， 并且也要创建CellEditing plugin插件实例， 在这里配置了鼠标单击后激活单元格的编辑器。--Row Editing行编辑器
其他类型的编辑是基于行的编辑，使用 RowEditor 组件。这使您可以一次性编辑整个行，而不是一个一个的对单元格进行编辑。 行编辑的工作方式与单元格编辑完全相同，我们需要做的就是将插件类型更改为 Ext.grid.plugin.RowEditing，并将 selType 设置为 ‘rowmodel‘:Ext.create(‘Ext.grid.Panel‘, {
title: ‘Simpsons‘,
store: Ext.data.StoreManager.lookup(‘simpsonsStore‘),
columns: [
{ header: ‘Name‘, dataIndex: ‘name‘, field: ‘textfield‘ },
{ header: ‘Email‘, dataIndex: ‘email‘, flex:1,
field: {
xtype: ‘textfield‘,
allowBlank: false
}
},
{ header: ‘Phone‘, dataIndex: ‘phone‘ }
],
selType: ‘rowmodel‘,
plugins: [
Ext.create(‘Ext.grid.plugin.RowEditing‘, {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
我们再次传递一些配置给我们的Ext.grid.plugin.RowEditing插件，现在当我们单击每个行的行， 编辑器将会出现，并使我们能够编辑每个我们有指定编辑器的列。
//在顶部的分页工具栏
//tbar: pagingToolbar,
// 在底部的分页工具栏
bbar: pagingToolbar
创建列表的一般过程：
Ext.onReady(function () {//1.定义Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: ‘name‘, type: ‘string‘ },
{ name: ‘age‘, type: ‘int‘ },
{ name: ‘phone‘, type: ‘string‘ }
]
});
//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "<%=basePath %>/ExtJsTest",
reader: {
root: "rows"
}
}
});
//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: 2
})
],
listeners: {
itemdblclick: function (me, record, item, index, e, eOpts) {
//双击事件的操作
}
},
bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
});
});
ExtJs之列表(grid)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。