自己东拼西凑试着用了一下Ext的grid,感觉不错,现在有空总结了一下使用Ext.grid的步骤:
1、初始化Proxy参数
js 代码
- var proxyParam={
- url:'http:
- method"'GET'
- };
2、初始化JsonReader Meta参数
js 代码
- var jsonReaderMeta={
- root: 'items',
- totalProperty: 'totalCount',
- id: 'id'
- };
3、初始化JsonReader RecordType参数
js 代码
- var recordType=[
- {name: 'title', mapping: 'title'},
- {name: 'author', mapping: 'author'},
- {name: 'totalPosts', mapping: 'totalPosts', type: 'int'},
- {name: 'lastPost', mapping: 'lastPost'},
- {name: 'postText', mapping: 'post_text'}
- ];
4、初始化Grid ColumnModel参数
js 代码
- var columnModel=[{
- id: 'topic',
- header: "Topic",
- dataIndex: 'title',
- width: 490,
- renderer: renderTopic,
- css: 'white-space:normal;'
- },{
- header: "Author",
- dataIndex: 'author',
- width: 100,
- hidden: true
- },{
- id: 'last',
- header: "Last Post",
- dataIndex: 'lastPost',
- width: 150,
- renderer: renderLast
- }];
5、初始化Data Store
js 代码
- var ds = new Ext.data.Store({
- proxy: new Ext.data.HttpProxy(proxyParam),
- reader: new Ext.data.JsonReader(jsonReaderMeta,recordType),
- remoteSort: true
- });
6、初始化ColumnModel
js 代码
- var cm = new Ext.grid.ColumnModel(columnModel);
7、终于该grid出场了
js 代码
- var grid = new Ext.grid.Grid('topic-grid', {
- ds: ds,
- cm: cm,
- selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
- enableColLock:false,
- loadMask: true
- });
从上面的过程来看,可以显示对grid的封装,同一类功能的界面可以有一个函数来构建一个grid,只要传入不同的初始化参数就可以了。
分享到:
相关推荐
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
NULL 博文链接:https://atian25.iteye.com/blog/1019910
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
Ext.grid.ColumnModel显示不正常
封装Ext.grid.Grid+dwr实现增删该查
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
Ext.grid.GridPanel 删除线 放到example文件夹下运行
org.restlet.ext.spring.jar
2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext....
主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以参考下
Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
使用步骤: 1、下载解压缩之后,使用IDE导入工程 2、在MyEclipse中启动服务器 3、打开IE在地址栏输入:http://localhost:8080/ExtAjax/TestAjax.html 如果一切正常,那么你可以看到Ext与Web服务器交互。 其中,我们...
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
运行Microsoft office时,vbe6ext.olb不能加载
Ext.get与Ext.fly的区别与用法
Ext.data.Store的基本用法 Ext.data.Store的基本用法 Ext.data.Store的基本用法
ExtJs选中var editor = new Ext.ux.grid.RowEditor详解.txt