- 浏览: 76303 次
文章分类
最新评论
-
angryfrank:
收获良多,赞
ExtJS4学习笔记十--Grid使用 -
万俟辉夜:
楼主知不知道怎么通过已知的行数和列数取得grid中该单元格的信 ...
ExtJS4学习笔记十--Grid使用 -
endual:
请问博主,我是用mvc的,请问form.panel怎么绑 ...
ExtJS4学习笔记九--数据模型的使用 -
365353650:
<%@ page language="java ...
ExtJS4学习笔记九--数据模型的使用 -
binjoo:
有password类型的文本框??
ExtJS4学习笔记二--表单控件相关
一、grid的例:
二、自定义渲染函数示例:
三、Ext.selection.CellModel(单元格选择模式)示例
四、Ext.selection.RowModel(行选择模式)示例--主要相关代码
五、Ext.selection.CheckboxModel(复选框选择模式)示例--关键代码
六、grid中的features使用
Ext.grid.feature.RowBody示例--关键代码
Ext.grid.feature.Summary示例--关键代码
七、Ext.grid.plugin.CellEditing示例--关键代码
八、Ext.grid.plugin.RowEditing示例--关键代码
九、Ext.grid.plugin.DragDrop示例--关键代码
十、Ext.grid.property.Grid示例
顶。。。。这么快就出4.0的学习笔记了啊!厉害!
学习Ing....
//配置表格列 {header: "姓名", width: 50, dataIndex: 'name'}, {header: "组长", width: 50, dataIndex: 'leader', xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列 trueText: '是', falseText: '否' }, {header: "生日", width: 100, dataIndex: 'birthday', xtype : 'datecolumn',//Ext.grid.column.Date日期列 format : 'Y年m月d日'//日期格式化字符串 }, {header: "薪资", width: 50, dataIndex: 'salary', xtype: 'numbercolumn',//Ext.grid.column.Number数字列 format:'0,000'//数字格式化字符串 }
xtype: 'actioncolumn',//Ext.grid.column.Action动作列 items: [{ icon: 'images/edit.gif',//指定编辑图标资源的URL handler: function(grid, rowIndex, colIndex) { //获取被操作的数据记录 var rec = grid.getStore().getAt(rowIndex); alert("编辑 " + rec.get('name')); } },{ icon: 'images/del.gif',//指定编辑图标资源的URL handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); alert("删除 " + rec.get('name')); } },{ icon: 'images/save.gif',//指定编辑图标资源的URL handler: function(grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); alert("保存 " + rec.get('name')); } }]
{ header: "描述", width: 100, xtype: 'templatecolumn',//Ext.grid.column.Template数字列 tpl : '{name}<tpl if="leader == false">不</tpl>是组长' }
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})
二、自定义渲染函数示例:
//定义渲染函数,格式化性别显示 function formatSex(value){ return value=='man'?'男':'<font color=red>女</font>'; } //定义渲染函数,格式化年龄显示 function formatAge(value,metadata){ if(value < 30){ //年龄小于30的设置背景颜色为#CCFFFF metadata.style = 'background-color:#CCFFFF;'; } return value; }
columns: [//配置表格列 {header: "id", width: 30, dataIndex: 'id'}, {header: "姓名", width: 50, dataIndex: 'name'}, {header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex}, {header: "生日", width: 100, dataIndex: 'birthday', //格式化生日显示 renderer:Ext.util.Format.dateRenderer('Y年m月d日') }, {header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge} ]
三、Ext.selection.CellModel(单元格选择模式)示例
//创建表格数据 var datas = [ [100,'张三',24], [200,'李四',30], [300,'王五',29] ]; //创建Grid表格组件 var grid = Ext.create('Ext.grid.Panel',{ title : '单元格选择模式示例', renderTo: Ext.getBody(), width:200, height:170, frame:true, selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel tbar : [{ text : '取得所选单元格', handler : function(){ var cell = grid.getSelectionModel().getCurrentPosition(); alert(Ext.JSON.encode(cell)); } }], store: {//配置数据源 fields: ['id','name','age'],//定义字段 proxy: { type: 'memory',//Ext.data.proxy.Memory内存代理 data : datas,//读取内嵌数据 reader : 'array'//Ext.data.reader.Array解析器 }, autoLoad: true//自动加载 }, columns: [//配置表格列 {header: "id", width: 30, dataIndex: 'id', sortable: true}, {header: "姓名", width: 80, dataIndex: 'name', sortable: true}, {header: "年龄", width: 80, dataIndex: 'age', sortable: true} ] });
四、Ext.selection.RowModel(行选择模式)示例--主要相关代码
simpleSelect : true,//启用简单选择功能 multiSelect : true,//支持多选 selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel tbar : [{ text : '取得所选行', handler : function(){ var msg = ''; var rows = grid.getSelectionModel().getSelection(); for(var i = 0; i < rows.length; i++){ msg = msg + rows[i].get('name') + '\n'; } alert(msg); } }]
五、Ext.selection.CheckboxModel(复选框选择模式)示例--关键代码
//注册复选框选择模式别名为selection.checkboxmodel Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');
multiSelect : true,//支持多选 selModel: { selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel }, tbar : [{ text : '取得所选行', handler : function(){ var msg = ''; var rows = grid.getSelectionModel().getSelection(); for(var i = 0; i < rows.length; i++){ msg = msg + rows[i].get('name') + '\n'; } alert(msg); } }]
六、grid中的features使用
Ext.grid.feature.RowBody示例--关键代码
features: [Ext.create('Ext.grid.feature.RowBody',{ getAdditionalData: function(data, idx, record, orig) { var headerCt = this.view.headerCt, colspan = headerCt.getColumnCount();//获取表格的列数 return { rowBody: record.get('introduce'),//指定行体内容 rowBodyCls: 'rowbodyColor',//指定行体样式 rowBodyColspan: colspan//指定行体跨列的列数 }; } })]
Ext.grid.feature.Summary示例--关键代码
features: [{ ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性 }], columns: [//配置表格列 {header: "姓名", flex: 1, dataIndex: 'name', summaryType: 'count',//求数量 summaryRenderer: function(value){ return '员工总数:'+value } }, {header: "薪资", flex: 1, dataIndex: 'salary', summaryType: 'average',//求平均值 summaryRenderer: function(value){ return '平均薪资:'+value } } ]Ext.grid.feature.Grouping示例--关键代码
features: [Ext.create('Ext.grid.feature.Grouping', { groupByText : '用本字段分组', showGroupsText : '显示分组', groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版 startCollapsed: true //设置初始分组是否收起 })], columns: [//配置表格列 {header: "姓名", flex: 1, dataIndex: 'name'}, {header: "性别", flex: 1, dataIndex: 'sex'}, {header: "年龄", flex: 1, dataIndex: 'age'} ]Ext.grid.feature.GroupingSummary示例--关键代码
features: [Ext.create('Ext.grid.feature.GroupingSummary', { groupByText : '用本字段分组', showGroupsText : '显示分组', groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版 startCollapsed: true //设置初始分组是否收起 })], columns: [//配置表格列 {header: "姓名", width: 100, dataIndex: 'name', summaryType: 'count',//求数量 summaryRenderer: function(value){ return '员工总数:'+value } }, {header: "性别", width: 50, dataIndex: 'sex'}, {header: "年龄", width: 110, dataIndex: 'age', summaryType: 'average',//求数量 summaryRenderer: function(value){ return '平均年龄:'+value } } ]
七、Ext.grid.plugin.CellEditing示例--关键代码
plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1//设置鼠标单击1次进入编辑状态 }) ], selType: 'cellmodel',//设置为单元格选择模式 columns: [//配置表格列 Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}), {header: "姓名", width: 50, dataIndex: 'name', editor: {//文本字段 xtype:'textfield', allowBlank:false } }, {header: "生日", width: 100, dataIndex: 'birthday', xtype : 'datecolumn',//Ext.grid.column.Date日期列 format : 'Y年m月d日',//日期格式化字符串 editor: {//日期字段 xtype:'datefield', allowBlank:false } }, {header: "薪资", width: 50, dataIndex: 'salary', xtype: 'numbercolumn',//Ext.grid.column.Number数字列 format:'0,000',//数字格式化字符串 editor: {//数字字段 xtype:'numberfield', allowBlank:false } } ]
八、Ext.grid.plugin.RowEditing示例--关键代码
plugins: [ //行编辑模式 Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 }) ], selType: 'rowmodel',//设置为单元格选择模式 columns: [//配置表格列 Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}), {header: "姓名", width: 50, dataIndex: 'name', editor: {//文本字段 xtype:'textfield', allowBlank:false } }, {header: "生日", width: 100, dataIndex: 'birthday', xtype : 'datecolumn',//Ext.grid.column.Date日期列 format : 'Y年m月d日',//日期格式化字符串 editor: {//日期字段 xtype:'datefield', allowBlank:false } }, {header: "薪资", width: 50, dataIndex: 'salary', xtype: 'numbercolumn',//Ext.grid.column.Number数字列 format:'0,000',//数字格式化字符串 editor: {//数字字段 xtype:'numberfield', allowBlank:false } } ]
九、Ext.grid.plugin.DragDrop示例--关键代码
viewConfig: { plugins: [ //行编辑模式 Ext.create('Ext.grid.plugin.DragDrop',{ dragGroup: 'grid1',//拖拽组名称 dropGroup: 'grid2'//拖放组名称 }) ] }
十、Ext.grid.property.Grid示例
//创建属性表格 var grid = new Ext.grid.property.Grid({ title: 'Ext.grid.property.Grid示例', width: 300, height: 200, renderTo: Ext.getBody(), //自定义属性编辑器 customEditors : { "性别" : new Ext.form.ComboBox({ editable : false, displayField:'sex', mode: 'local', triggerAction: 'all', store:new Ext.data.SimpleStore({ fields: ['sex'], data : [['男'],['女']] }) }), "出生日期": new Ext.form.DateField({ format : 'Y年m月d日', selectOnFocus:true, allowBlank : false }) }, //自定义渲染函数 customRenderers: { //格式化布尔值显示 "是否已婚": function(v){ return v?'是':'否'; }, //格式化日期显示 "出生日期": Ext.util.Format.dateRenderer('Y年m月d日') }, source: { "员工名称" : "张三", "出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'), "性别" : '男', "是否已婚" : false, "年龄" : 29 } });
评论
3 楼
angryfrank
2014-05-06
收获良多,赞
2 楼
万俟辉夜
2012-11-21
楼主知不知道怎么通过已知的行数和列数取得grid中该单元格的信息?
1 楼
31212
2011-09-02
顶。。。。这么快就出4.0的学习笔记了啊!厉害!
学习Ing....
发表评论
-
ExtJS4学习笔记十一 树控件的使用
2011-09-01 16:17 3172一、树面板简单示例 var ... -
ExtJS4学习笔记九--数据模型的使用
2011-09-01 14:43 60941、创建Ext.data.Model数据 ... -
ExtJS4学习笔记八--Template的使用
2011-09-01 14:21 53761、append方法 var tpl = new Ext.Te ... -
ExtJS4学习笔记七--事件绑定相关
2011-09-01 11:27 5914一、addListener方法 var button = Ex ... -
ExtJS4学习笔记六--一些小知识点
2011-09-01 09:31 48801、获取页面上的HTML元素,并进行处理,使用Ext.get( ... -
ExtJS4学习笔记五--面板使用
2011-08-31 17:06 5470标准面板: Ext.create('Ext.panel.Pan ... -
ExtJS4学习笔记四--图片上传
2011-08-31 15:51 3939前端程序: <HTML> <HEAD&g ... -
ExtJS4学习笔记三--远程访问数据源示例
2011-08-31 15:10 3240前端页面: <HTML> <HEAD&g ... -
ExtJS4学习笔记二--表单控件相关
2011-08-31 14:29 11343二、表单部分相关 <HTML> <HEA ... -
ExtJs4学习笔记一--基础知识
2011-08-31 11:42 5551开始学习ExtJs4,陆续记录学习过程,希望有所用处: 特别注 ...
相关推荐
ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)...
ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(一)——准备工作 ...
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net
因此,现在几乎所有的grid控件都会支持分页功能。extjs也不例外,它对分页也提供了强大而方便的支持,使得我们在分页处理上可以得心应手。 在extjs中,类Ext.PagingToolbar封装了关于分页的操作,该类从Toolbar继承...
Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid,带checkbox的可编辑的Grid等知识点,并附实现代码
今天学习extjs中的grid,它可以说是功能强大,无出其右,只有你想不到的,没有它做不到的,呵呵,好像是有点夸张了。好,不说废话了,我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供...
因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...
EXTJS 学习笔片段1 Form ComboBox 远程ComboBox 替代页面上已经存在的Select控件 Grid EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口(模态窗口) ...
ext 4.0 学习笔记(1)Array Grid 2011-09-20 13:18 860人阅读 评论(1) 收藏 举报 今天刚开始接触EXT,直接跳过2.2等较旧版本;由于网上的中文资料几乎都是2.2,并且我也是刚开始接触EXT,所以用笔记的方式记录我...