Ext-JS概述(工作原理).docVIP

Ext-JS概述（工作原理） 什么是ExtJS ExtJS（简称Ext）是以HTML作为控件的骨干、CSS作为样式的表现、以JavaScript作为语言，可应用于IE/FireFox/Opera等的浏览器上的AJAX UI组件库。 静态页面： html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleGrid Filter Example/title link rel=stylesheet type=text/css href=../../resources/css/ext-all.css / script type=text/javascript src=../../adapter/ext/ext-base.js/script script type=text/javascript src=../../ext-all.js/script script type=text/javascript src=grid-filter.js/script /head body h1Grid Filter Example/h1 div id=grid-example style=margin: 10px;/div /body /html 说明：Ext的内核文件有如下几个： ext-all.css ------------------------- 与显示有关的JavaScript文件grid-filter.js，实现显示与界面的分离。 配置Ext的JavaScript：grid-filter.js Ext.onReady(function(){ var ds = new Ext.data.JsonStore({ url:GetData.ashx,//数据源 id: id, //主键 totalProperty: total, //记录数 root: data, //记录数组数据名 fields: [{name:id}, {name:company}]//记录字段数组 }); var cm = new Ext.grid.ColumnModel([ {dataIndex: id, header: Id},//数据字段，列标题文本 {dataIndex: company, header: Company} ]); var grid = new Ext.grid.GridPanel({ id: example, title: Grid Filters Example, ds: ds,//数据存储 cm: cm,//数据列模板 enableColLock: false, loadMask: true, height:400, width:700, el: grid-example//网格显示容器标签元素 }); grid.render(); ds.load(); }); 说明： Ext.onReady(function(){…})设置DOM文档加载完毕后回调函数。 三个核心对象：数据存储、网格列模板和网格面板 数据存储的重要属性有：url、 id、totalProperty、root、fields。 网格列模板：这个列模板包含多个列，每个列重要属性为dataIndex、header。 网格面板的重要属性ds、cm、el。 服务器端获得数据的程序GetData.ashx %@ WebHandler Language=C# Class=GetData % using System; using System.Web; public class GetData : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = text/plain; context.Response.Write({total:2,data:[{id:1,company:百度},{id:2,company:新浪}]}); } public bool IsReusable { get { return false; } } } 利用单击事件装载数据 在静态页面中添加按钮 input id=btn_getdat