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)的更多相关文章
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- Sencha ExtJS 6 Widget Grid 入门
最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...
- ExtJS自制表格Grid分页条
试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- ExtJs中的Grid具体操作(笔记及心得)
一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex: ...
- ExtJS学习(三)Grid表格
表格说明 Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xty ...
- [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
- ExtJS实现分页grid paging
背景 分页查询在Web页面中比例很大,我自己也写过分页框架,也用过很多第三方分页. 基于jquery的dataTables,那么多例子.清晰API.应用广泛.开源,即使是新手也可以很快上手. ExtJ ...
- 纸壳CMS列表Grid的配置
纸壳CMS(ZKEACMS)里的Grid是一个TagHelper,是对jQuery插件datatables的一个配置封装. Easy.Mvc.TagHelpers.GridTagHelper grid ...
随机推荐
- 2015/9/2 Python基础(7):元组
为什么要创造一个和列表差别不大的容器类型?元组和列表看起来不同的一点是元组用圆括号而列表用方括号.而最重要的是,元组是不可变类型.这就保证了元组的安全性.创造元组给它赋值和列表完全一样.除了一个元素的 ...
- jenkins修改job默认名字
${GIT_BRANCH,fullName="false"}-${BUILD_NUMBER}-${GIT_REVISION,length=12}-${deploy_rollback ...
- Android中Handler导致的内存泄露
http://www.androiddesignpatterns.com/2013/01/inner-class-handler-memory-leak.html Consider the follo ...
- 省队集训 Day6 序列
[题目大意] 给出$n$个数的序列$a_1, a_2, ..., a_n$,有$m$次操作,为下面三种: $A~l~r~d$:区间$[l,r]$,全部加$d$. $M~l~r~d$:区间$[l,r]$ ...
- 6、MySQL索引种类
1.普通索引 这是最基本的索引,它没有任何限制,比如上文中为title字段创建的索引就是一个普通索引,MyIASM中默认的BTREE类型的索引,也是我们大多数情况下用到的索引. –直接创建索引 CRE ...
- JS中的实例方法与静态方法
一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么 静态方法: function A(){} A.sayMeS=function(){ console.lo ...
- Cordova入门
创建你的第一个App 因为对接要对接酷音,实现h5跨平台调用客户端的保存和分享功能,所以学了下cordova的入门. 安装Cordova CLI Cordova命令行工具作为npm包分发. 安装cor ...
- 分类算法:决策树(C4.5)(转)
C4.5是机器学习算法中的另一个分类决策树算法,它是基于ID3算法进行改进后的一种重要算法,相比于ID3算法,改进有如下几个要点: 1)用信息增益率来选择属性.ID3选择属性用的是子树的信息增益,这里 ...
- perl6文件操作
use v6; #perl6中读取文件方法 #:r 只读, :w 只写, :rw 读写, :a 追加 my $fp = open 'filename.txt', :rw; for $fp.^metho ...
- Laravel 项目上线的一些注意事项
1.应用生产环境 在 .env 文件里设置 APP_ENV=production 2.关闭调试模式 在 .env 文件中设置 APP_DEBUG = false 3.生成 APP_KEY 使用 Art ...