- 浏览: 196340 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
在世界的中心呼喚愛:
思路很好
连连看全局消除算法 -
tianaozhu:
请问,我修改了词库和源文件怎么就不好用了, 我源文件是: My ...
自己动手开发翻译软件(Java版) -
Arlrn:
博主你好,最近在学习排序算法,看了你的博客,你的直接插入排序, ...
各种排序算法的实现及其比较 -
sharong:
有一个明显错误,很显然冒泡排序的时间复杂度是O(n^2)
各种排序算法的实现及其比较 -
julydave:
希尔排序不太对吧。。
各种排序算法的实现及其比较
读取XML文件来构造grid
先了解一个函数:Ext.data.XmlReader( Object meta
, Object recordType
)
API文档解释:
Data reader class to create an Array of Ext.data.Record objects from an XML document based on mappings in a provided Ext.data.Record constructor.
Note: that in order for the browser to parse a returned XML document, the Content-Type header in the HTTP response must be set to "text/xml" or "application/xml".
Create a new XmlReader.
Parameters:
-
meta
: ObjectMetadata configuration options -
recordType
: ObjectEither an Array of field definition objects as passed to Ext.data.Record.create, or a Record constructor object created using Ext.data.Record.create.
- void
给一个例子:
var Employee = Ext.data.Record.create([ {name: 'name', mapping: 'name'}, // 同名就可以不写"mapping" ,甚至可以简单到只有'name' {name: 'occupation'} // 同名 ]); var myReader = new Ext.data.XmlReader({ totalProperty: "results", // The element which contains the total dataset size (optional) record: "row", // The repeated element which contains row information idProperty: "id" // The element within the row that provides an ID for the record (optional) messageProperty: "msg" // The element within the response that provides a user-feedback message (optional) }, Employee); //两个参数,第一个指定一些重要的参数,如record,totalProperty等
XML文件
<?xml version="1.0" encoding="UTF-8"?> <dataset> <results>2</results> <row> <id>1</id> <name>Bill</name> <occupation>Gardener</occupation> </row> <row> <id>2</id> <name>Ben</name> <occupation>Horticulturalist</occupation> </row> </dataset>
有一点需要说明的是 XmlReader似乎得在服务器上才能运行。
这里我们可以把整个文件夹拷到tomcat的webapps目录下,然后再用http://localhost:8080/MyExtjsTest/TestGrid/GridXml.html 这样的格式来访问。看一个示例:
做一个grid,我们先分四步走:
1、先定义一个Ext.data.Store对象,用来读取数据
2、创建一个 Ext.grid.GridPanel 对象
3、把上面创建的GridPanel 对象加到某个用来显示的组件中
4、最后,别忘了store.load(); 加载数据
<html> <head> <title>Data Binding Example</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /></script> <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-all.js"></script> <style type="text/css"> body { padding: 15px; } .x-panel-mc { font-size: 12px; line-height: 18px; } </style> <script type="text/javascript"> Ext.onReady(function(){ // create the Data Store var store = new Ext.data.Store({ // load using HTTP url: 'sheldon2.xml', // the return will be XML, so lets set up a reader reader: new Ext.data.XmlReader({ // records will have an "Item" tag record: 'Item', id: 'ASIN', totalRecords: '@total' }, [ // set up the fields mapping into the xml doc // The first needs mapping, the others are very basic {name: 'Author', mapping: 'ItemAttributes > Author'}, //ItemAttributes里面的Author 'Title', 'Manufacturer', 'ProductGroup', // Detail URL is not part of the column model of the grid 'DetailPageURL' ]) //XmlReader }); //Store // create the grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "Author", width: 120, dataIndex: 'Author', sortable: true}, {header: "Title", width: 180, dataIndex: 'Title', sortable: true}, {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true}, {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true} ], sm: new Ext.grid.RowSelectionModel({singleSelect: true}),//单选 viewConfig: { forceFit: true }, height:210, split: true, region: 'north' }); // define a template to use for the detail view 定义一个模板,之后的章节会讲解模板的使用,这边看不懂也没关系 var bookTplMarkup = [ 'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>', 'Author: {Author}<br/>', 'Manufacturer: {Manufacturer}<br/>', 'Product Group: {ProductGroup}<br/>' ]; var bookTpl = new Ext.Template(bookTplMarkup);//模板类对象 var ct = new Ext.Panel({ renderTo: 'gridXmlTest', frame: true, title: 'Book List', width: 540, height: 400, layout: 'border', items: [ grid, { id: 'detailPanel', region: 'center', bodyStyle: { background: '#ffffff', padding: '7px' }, html: 'Please select a book to see additional details.' } ] })//Ext.Panel grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) { //行被选中时的事件 var detailPanel = Ext.getCmp('detailPanel'); //得到id为detailPanel组件,下方有解释 bookTpl.overwrite(detailPanel.body, r.data); //overwrite方法,下文有解释 }); store.load(); }); </script> </head> <body> <div id="gridXmlTest"></div> </body> </html>
getCmp( String id
) : Ext.Component
This is shorthand reference to Ext.ComponentMgr.get. Looks up an existing Componentby id
Parameters:
-
id
: StringThe component id
-
Ext.Component
The Component, <tt>undefined</tt> if not found, or <tt>null</tt> if a Class was found.
上面的overwrite方法其实调用的是Ext.XTemplate.overwrite
API解释:
overwrite(
Mixed el
, Object/Array values
, [Boolean returnElement
] ) : HTMLElement/Ext.Element
Applies the supplied values to the template and overwrites the content of el with the new node(s).
Parameters:
-
el
: MixedThe context element -
values
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'}) -
returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
-
HTMLElement/Ext.Element
The new node or Element
发表评论
-
Ext js面向对象的特性
2011-05-11 11:06 10191、支持命名空间(Java里用的是包的概念) Ex ... -
Ext 2.x中,关于combobox的取值问题
2011-02-15 19:47 1778Ext中,关于combobox的取 ... -
Ext常用的知识点(三)--combobox和xml的绑定
2011-02-09 11:47 1070直接看代码,所有需要注意的地方都标在代码后面了 Ext ... -
Ext常用的知识点(二)--panel和window
2011-02-09 01:16 15481、Panel 很容易就可以做写出一个panel v ... -
Ext常用的知识点(一)--弹出消息
2011-02-08 21:38 1390首先,要写Extjs,建议大家用一个工具spket。 ... -
Extjs复习笔记(二十)-- tree和grid结合
2010-11-07 12:20 1611让tree和grid结合起来 相关内容之前大都讲过,这里就不 ... -
Extjs复习笔记(十九)-- XML作为tree的数据源
2010-11-07 11:52 2674用XML来作为tree的数据源 所有文件都上传了 ... -
Extjs复习笔记(十八)-- TreePanel
2010-11-07 11:09 1312Grid这一块暂时就讲到这。这一节开始就是tree的相关内容了 ... -
Extjs复习笔记(十七)-- 给grid里面的内容分组
2010-11-07 03:11 2007给grid里面的内容分组。 Ext.onReady(fun ... -
Extjs复习笔记(十六)-- 可编辑的grid
2010-11-07 02:43 1856可编辑的grid。 可以响应数据加载完时的事件。。。 可以 ... -
Extjs复习笔记(十五)-- JsonReader
2010-11-07 01:54 2715使用JsonReader来创建grid中的store (exa ... -
Extjs复习笔记(十三)-- GridPanel
2010-11-05 03:11 1692这一节开始,复习grid,博大精深呀! 拿官网的例子来 ... -
Extjs复习笔记(十二)--form验证
2010-11-04 23:37 1431验证。。。 1、不允许 ... -
Extjs复习笔记(十一)--换肤
2010-11-04 21:48 1305换肤功能 首先写一个 ... -
Extjs复习笔记(十)-- 网页主框架
2010-11-04 14:58 1048主界面的雏形: <!DOCTYPE html ... -
Extjs复习笔记(九)-- 加载等待
2010-11-04 13:29 2130登陆时的加载状态: <style type=&qu ... -
Extjs复习笔记(八)--登陆框
2010-11-03 02:33 1779之前有一篇博客展示了一个图书管理系统,接下来的几篇博客将会解析 ... -
Ext图书管理系统
2010-10-31 10:17 1900其实这一篇日志写很久了,由于近期项目演示的需要,我把它转到这边 ... -
Extjs复习笔记(七)-- ComboBox的添加、修改
2010-10-31 02:09 2601ComboBox的测试,有几个方法没写完整,有待之后解决。。。 ... -
Extjs复习笔记(六)--完整的浮动窗口
2010-10-30 03:30 3347前面搞了这么久的基础,下面该来做这个界面了: 这是一个浮动窗 ...
相关推荐
在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...
在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...
在EXTJS框架中,换肤是一项重要的功能,它允许开发者根据用户需求或品牌风格改变应用程序的外观和感觉。本文将深入探讨EXTJS的换肤机制,以及如何利用提供的主题CSS文件实现这一特性。 EXTJS是一个强大的JavaScript...
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
在“Extjs复习笔记(十五)-- JsonReader”这篇博文中,博主探讨了ExtJS中的JsonReader,这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包(Ext.data)的一部分,用于从服务器获取JSON格式的数据,...
本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组,帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类,这样可以更清晰地组织和展示数据。这在处理大量数据时...
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
Extjs6.2 生成的admin-dashboard官方模板
ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
在ExtJS中,我们可以利用XMLReader来解析XML文档,将XML节点转化为可以用于TreePanel的模型对象。XMLReader是Ext.data.reader.Reader的子类,它提供了处理XML数据的专门方法和配置选项。 创建XML数据源的第一步是...
"extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4学习笔记(四)---Grid的使用 Extjs4开发笔记(三)——菜单的实现 Extjs4开发笔记(二)——框架的搭建 Extjs4开发笔记(五)——动态grid Extjs4开发笔记(四)——实现登录...
ExtJS 4.2 component - Field-Money
ExtJS 是一个流行的JavaScript库,主要用于构建富客户端的Web应用程序。这个实例——"嗖嗖嗖",似乎是一个基于ExtJS的项目,但具体的功能或用途并未在标题和描述中明确指出。不过,我们可以根据提供的文件名来推测...
这个"extjs-3.0-all-src"文件是ExtJS 3.0的完整源代码包,对于开发者来说,深入理解其内部机制和进行自定义扩展非常有价值。让我们详细探讨一下这个框架及其相关知识点。 1. **ExtJS框架概述**: ExtJS 是由Sencha...
语言程序设计资料:ExtJs学习笔记-2积分.doc