`
li-yuan
  • 浏览: 68197 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

是用Ext.grid的初始化步骤总结

阅读更多
自己东拼西凑试着用了一下Ext的grid,感觉不错,现在有空总结了一下使用Ext.grid的步骤:
1、初始化Proxy参数
js 代码
 
  1. var proxyParam={  
  2.         url:'http://localhost:8080/demo2/login/index',  
  3.         method"'GET'  
  4.     };  
2、初始化JsonReader Meta参数
js 代码
 
  1. var jsonReaderMeta={  
  2.         root: 'items',  
  3.         totalProperty: 'totalCount',  
  4.         id: 'id'  
  5.     };  
3、初始化JsonReader RecordType参数
js 代码
 
  1. var recordType=[  
  2.             {name: 'title', mapping: 'title'},  
  3.             {name: 'author', mapping: 'author'},  
  4.             {name: 'totalPosts', mapping: 'totalPosts', type: 'int'},  
  5.             {name: 'lastPost', mapping: 'lastPost'},  
  6.             {name: 'postText', mapping: 'post_text'}  
  7.        ];  
4、初始化Grid ColumnModel参数
js 代码
  1. var columnModel=[{  
  2.            id: 'topic',  
  3.            header: "Topic",  
  4.            dataIndex: 'title',  
  5.            width: 490,  
  6.            renderer: renderTopic,  
  7.            css: 'white-space:normal;'  
  8.         },{  
  9.            header: "Author",  
  10.            dataIndex: 'author',  
  11.            width: 100,  
  12.            hidden: true  
  13.         },{  
  14.            id: 'last',  
  15.            header: "Last Post",  
  16.            dataIndex: 'lastPost',  
  17.            width: 150,  
  18.            renderer: renderLast  
  19.         }];  
5、初始化Data Store
js 代码
  1. var ds = new Ext.data.Store({  
  2.         proxy: new Ext.data.HttpProxy(proxyParam),  
  3.         reader: new Ext.data.JsonReader(jsonReaderMeta,recordType),  
  4.         remoteSort: true  
  5.     });  
6、初始化ColumnModel
js 代码
  1. var cm = new Ext.grid.ColumnModel(columnModel);  
7、终于该grid出场了
js 代码
  1. var grid = new Ext.grid.Grid('topic-grid', {  
  2.         ds: ds,  
  3.         cm: cm,  
  4.         selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),  
  5.         enableColLock:false,  
  6.         loadMask: true  
  7.     });  
从上面的过程来看,可以显示对grid的封装,同一类功能的界面可以有一个函数来构建一个grid,只要传入不同的初始化参数就可以了。

分享到:
评论

相关推荐

    Ext grid合并单元格

    初始化 Grid 最后,创建 Grid 实例时,设置了视图配置 `viewConfig`,指定了模板。此外,还创建了数据存储 `store` 和列模型 `colM`,并将其传递给了 Grid。 ```javascript var grid = new Ext.grid....

    Ext2.0框架的grid使用

    ### Ext2.0框架的Grid使用详解 #### 引言 在前端开发领域,Ext2.0框架以其强大的功能和灵活的组件库而备受推崇,尤其是其Grid组件,更是前端开发者构建美观、交互性强的数据展示界面的利器。本文将深入探讨Ext2.0...

    ext实例 ext操作步骤

    3. **启动EXT**:使用`Ext.onReady`函数在DOM加载完成后执行EXT的初始化代码,例如弹出一个消息框。 ```javascript Ext.onReady(function() { Ext.MessageBox.alert("你好", "wayfoon"); }); ``` 4. **创建布局...

    yui的扩展ext.rar

    - 初始化应用:使用Ext.onReady或Ext.application启动应用。 5. EXT的响应式设计 EXT还支持响应式布局,可以根据不同设备和屏幕尺寸自动调整界面,适应移动设备和平板电脑,实现跨平台的Web应用开发。 6. 扩展与...

    Ext grid与树实例

    2. **分析代码**:逐行阅读JS文件,理解如何初始化Grid和Tree,包括数据源的配置、列的定义、事件监听器的设置等。 3. **运行示例**:在浏览器中打开HTML文件,查看运行效果,尝试交互操作,理解各种功能的工作原理...

    Ext 将grid渲染到combox

    2. **初始化 ComboBox** ```javascript var combo = new Ext.form.ComboBox({ store: store, mode: 'local', triggerAction: 'all', minListWidth: document.body.clientWidth * 0.6 + 6, renderTo: 'sexDiv...

    Ext Grid数据导出到Excel

    - **初始化Excel对象**:首先通过`new ActiveXObject("Excel.Application")`创建Excel应用程序对象。 - **创建工作簿和工作表**:使用`Workbooks.Add()`方法创建一个新的工作簿,然后获取活动工作表`ActiveSheet`。 ...

    ExtJs动态grid的生成

    动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据的变化和用户的实时请求。在描述中提到的博客链接(由于无法直接访问,我们只能基于通用...

    Ext Grid导出Excel

    在页面加载时,它会初始化Ext Grid,并加载数据。同时,它可能还包含了导出按钮的定义,当用户点击这个按钮时,会触发`gridToExcel.js`中的导出逻辑。 最后,`exportexcel.jsp`可能是一个服务器端的处理程序,用于...

    Ext Grid +dwr 列表展示展示带分页

    5. **加载初始数据**: 最后,初始化Grid时,调用数据源的`load`方法,传递初始分页参数,加载第一页数据到Grid中。 总结,本示例展示了如何使用Ext Grid和DWR结合实现一个具有分页功能的列表展示。通过这种方式,...

    DWR+EXT简单示例

    4. **调用DWR方法**:在EXT GRID的初始化或事件监听器中,调用DWR方法来填充数据或者响应用户操作。 5. **数据更新**:当EXT GRID中的数据发生变化时,可以通过DWR将更新同步回服务器,保持服务器和客户端数据的...

    老师整理的extjs学习笔记

    2. **初始化**: 定义 `Ext.onReady` 函数来确保页面 DOM 完全加载后再运行 JavaScript 代码。 3. **创建组件**: 使用 ExtJS 提供的 API 创建 UI 组件,如面板、表格等。 4. **绑定数据**: 通过数据存储(Store)将...

    Ext2.1API中文文档

    例如,`Ext.Component`是所有UI组件的基类,它的`initComponent`方法是初始化组件的关键步骤,而`render`方法负责将组件渲染到页面上。开发者可以通过扩展或配置这些基础类来创建自定义组件。 标签“源码”意味着...

    Ext插件安装Ext插件安装

    插件可以通过配置选项在组件定义时启用,这样组件实例化时就会自动加载并初始化插件。 安装ExtJS插件通常涉及以下几个步骤: 1. **获取插件**:你可以从ExtJS官方市场、GitHub或其他第三方资源获取插件。确保插件...

    扩展GridPanel,附带分页选中状态,实现快速构建一个功能齐全的Grid

    - `initComponent`: 初始化组件时执行的函数,这里可以进行额外的配置。 - `onLoad`: 数据加载后触发的事件,可以用来处理加载后的逻辑,比如设置默认选中项。 - `beforeLoad`: 数据加载前触发的事件,可以用来...

    静态EXTJS GRID

    你需要确保你的EXTJS库包含了中文语言包,并在初始化Grid时指定了正确的语言设置。 2. **Column Model**:EXTJS Grid的列模型定义了列的属性,包括字段名、宽度、对齐方式、可编辑性等。如果列显示异常,可能是...

    jq-extgrid表格插件

    3. 初始化jq-extgrid,配置各种选项,如数据源、列定义、分页设置等。 4. 调用插件方法,如加载数据、设置排序规则等。 ### 3. 示例代码 ```html <table id="grid"> $(function() { $('#grid').jqGrid({ url: '...

    ExtJs扩展之GroupPropertyGrid代码

    由于PropertyGrid继承自EditorGridPanel,而EditorGridPanel已经支持分组,所以我们只需要确保在初始化PropertyGrid时传入正确的store即可。 完成以上步骤后,我们便成功地扩展了ExtJS的PropertyGrid,使其具备了...

    ExtJS 3.2的中文参考手册

    - **构造器函数**: 定义类的构造器函数,初始化对象的属性和方法。 - **方法共享**: 通过原型链实现方法的共享,减少内存消耗。 #### 17. **表单组件入门** - **表单体**: 创建表单的基本结构,包括表单标签、...

Global site tag (gtag.js) - Google Analytics