一、如何获取数据
在ExtJs中获取数据主要靠下面四个类: Ext.data.DataProxy、Ext.data.Record、Ext.data.DataReader、Store。下面对这三个类做个简单的介绍。
DataProxy:获取想要的数据。通过他能得到来自不同地方的数据,如数组、远程服务器,并组织成不同的格式。
DataReader:定义数据项的逻辑结构,一个数据项有很多列,每列的名称是什么,分别是什么数据类型,都由该类来定义。另外,还负责对不同格式的数据进行读取和解析。在这里用到了Ext.data.Record类来定义具体的列类型。
Store:存储器,用于整合Proxy和Reader,控件索取数据时通常和他打交道。
二、Ext.data.DataProxy 类
proxy是代理的意思,很多时候,聪明的架构师和设计者为了屏蔽底层的差异,给用户提供一个统一的访问接口,会设计一个名为“proxy”的类。这种设计哲学在架构中普通应用,并且解决了很多实际问题,代码也变得更加优雅,并有效降低代码侵入。
Ext.data. DataProxy就是来源于这样一种灵感。
Ext.data.DataProxy 是获取数据的代理,数据可能来自于内存,可能来自于同一域的远程服务器数据,更有可能来自于不同域的远程服务器数据。
但是,在实际应用中,我们不会直接使用Ext.data.DataProxy,而是使用他的子类:MemoryProxy、HttpProxy和ScriptTagProxy,他们的作用分别是:
MemoryProxy:获取来自内存的数据,可以是数组、json或者xml。
HttpProxy:使用HTTP协议通过ajax 从远程服务器获取数据的代理,需要指定url。
ScriptTagProxy:功能和HttpProxy一样,但支持跨域获取数据,只是实现时有点偷鸡摸狗。
因为数据最终要显示在ComboBox 中,所以我们以ComboBox 为中心进行设计。大家应该知道,下拉列表框有两个值,一个是显示值,另一个是实际值,也就是说,一个数据项包含两列:显示值列和实际值列。我们定义一个用来保存城市名称的二维数组:
var cities = [["1", "沈阳"], ["2", "大连"], ["3", "鞍山"], ["4", "辽阳"]];
在二维数组中,每一个城市保存了两个值:值一表示城市编号,作为实际值,值二表示城市名称,作为显示值。然后,我们将data 构建出一个MemoryProxy对象:
var mp = new Ext.data.MemoryProxy(cities);
三、Ext.data.DataReader 类
DataReader 从来不是单独行动的,他没有太多的自主权,总是看DataProxy行事。总体来说,DataReader 用来定义数据项(行)的逻辑结构,主要信息有:列的逻辑名称(name)、列的数据类型(type)、列与数据源的索引映射(mapping)等,另外,还包含一些元数据,如分页信息。
实际上,每一个数据项都是一个Ext.data.Record(记录)对象,而数据项的列信息则是通过Ext.data.Record来定义的。Ext.data.Record并没有固定的结构,他保存的是一个json对象数组,数组的元素个数由列的数量来决定。在上面的例子中,城市包含ID 和名称,所以,必须在数组中定义两个元素,基本就是这个样子:
var myRecord = Ext.data.Record.create([{ name : 'cid', type : 'int', mapping : 0 }, { name : 'cname', type : 'string', mapping : 1 }]);
我们定义了一个myRecord的结构,通过Ext.data.Record.create创建,参数是一个json对象数组,name 和type 分别表示每一列的名称和数据类型,mapping 是列值与数组元素的映射关系。
Record 创建好后,必须和DataReader 关联,DataReader 也同样有三个子类:Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader。我之前说过DataReader 从来不单独行动,使用哪一个子类主要取决于DataProxy中封装的数据类型,如果是数组,则使用Ext.data.ArrayReader;如果是json,则使用Ext.data.JsonReader;如果是xml,则使用Ext.data.XmlReader。
在本例中,我们处理的数据类型是数组,所以自然要使用ArrayReader。
var myReader = new Ext.data.ArrayReader({}, myRecord);
构造ArrayReader 对象时,构造函数的第一个参数就是元数据,第二个参数则是Record。也可以一步到位:
var myReader = new Ext.data.ArrayReader({}, [ {name: "cid", type: "int", mapping: 0}, {name: "cname", type: "string", mapping: 1} ]);
四、Ext.data.Store 类
这个类相对简单,不需要面对数据和结构,只是把DataProxy和DataReader 整合在一起,这样一来,数据有了,结构有了,俨然就是一张数据表,想一想数据库中的物理表是不是就是这样的呢?嗯,非常像。
典型的写法像这样:
var store = new Ext.data.Store({ proxy: proxy, reader: reader });
到了这一步,别以为大功告成了,其实这时候数据并没有加载到Store中,默认情况下,Store采取延时加载,必须显式调用load()方法,当然,我们也可以采取即时加载策略,按如下配置即可:
var store = new Ext.data.Store({ proxy: proxy, reader: reader, autoLoad: true //即时加载数据 });
我们画张图,用来描述这三个类之间的关系。
可以看出,Ext.data.Store的主要目的是在内存中建立一张数据表,填充到组件中,这些组件形态也千差万别,最典型的就是ComboBox 和GridPanel。
五、下拉列表框
下拉列表框被定义成ComboBox 类,位于Ext.form命名空间,和Button不同,他是一个表单域组件,常用于表单中。
我们有一个这样的ComboBox,该组件用来显示辽宁的城市。
看起来和select标记别无二致,只是更加漂亮了。
一起来熟悉一个比较典型的ComboBox的定义方法:
var combobox = new Ext.form.ComboBox({ renderTo : Ext.getBody(), triggerAction : "all", store : store, displayField : "cname", valueField : "cid", mode : "local", emptyText : "请选择辽宁城市" });
嘿嘿,如果不解释您一定会愣上半天,有时候真不习惯Extjs中属性名称的定义风格,也许只怪我们的头发太长见识太少,来认识一下吧。
triggerAction:是否开启自动查询的功能,为all表示不开启,为query表示开启,默认为query;
store:不用解释了,和前面的Ext.data.Store对象挂勾,定义数据源;
displayField:关联Record的某一个逻辑列名作为显示值,本例为城市名称;
valueField:关联Record的某一个逻辑列名作为实际值,本例为城市ID;
mode:可选值有local和remote,如果数据来自本地,用local,如果数据来自远程服务器,必须用remote,默认为remote;
emptyText:没有选择任何选项的情况文本框中的默认文字。
请理解并记住这个基本的用法,很多东西都是这样巩固消化的。当我们面对如海水般涌来的信息,第一感觉就是无所适从,继而惊惶失措,夺路而逃,于是被永远挡在真理的大门之外。成功和失败,只在一念之间。
抓住核心点之后,慢慢扩展,知识架构便会越来越丰满,因为把握好了整个知识点的精髓,再怎么变化,都不至于迷路。
六、得到下拉列表框的值
下拉列表框(ComboBox)有两个值,显示值和实际值。显示值为用户提供了更为直观和理想的体验,而实际值则会传送到服务器,供服务器处理。
ComboBox定义了两个方法,其中,getValue()用于返回实际值,getRawValue()用于返回显示值。
我在页面上放置了一个按钮,点击按钮显示下拉列表框的值:
var btn = new Ext.Button({ text : "列表框的值", renderTo : Ext.getBody(), handler : function() { Ext.Msg.alert("值", "实际值:" + combobox.getValue() + ";显示值:" + combobox.getRawValue()); } });
七、源代码
下面是本章示例的源程序:
Ext.onReady(function() { cmp(); }); var cmp = function() { // 1. 定义本地静态数据 var cities = [["1", "沈阳"], ["2", "大连"], ["3", "鞍山"], ["4", "辽阳"]]; // 2. 根据数据定义内存代理 var mp = new Ext.data.MemoryProxy(cities); // 3. 创建记录格式 var myRecord = Ext.data.Record.create([{ name : 'cid', type : 'int', mapping : 0 }, { name : 'cname', type : 'string', mapping : 1 }]); // 4.把数据按照创建的记录格式进行组合 var myReader = new Ext.data.ArrayReader(mp, myRecord); //var reader = new Ext.data.ArrayReader({}, myRecord); // 5.把数据按照一定格式组成的数据组传入缓存 var myStore = new Ext.data.Store({ proxy : mp, reader : myReader, autoLoad : true }); // store.load(); 如果在Store配置信息中使用autoLoad:true,就可以不用此方法. // 5.创建下拉列表,把数组写入下接列表 var myCb = new Ext.form.ComboBox({ id : "myCb1", store : myStore, title : "辽宁省下属市", emptyText : "辽宁省下属市", displayField : "cname", valueField : "cid", triggerAction : "all", mode : "local", renderTo : Ext.getBody() }); // 6.创建按钮,实现读取下拉列表 var myBtn = new Ext.Button({ id : "myBtn1", type : "button", text : "所选城市", renderTo : Ext.getBody(), handler : function() { if (myCb.getValue() == "") { Ext.Msg.alert("提示","请做出选择"); myCb.focus(true); } else { Ext.Msg.alert("值", "实际值:" + myCb.getValue() + ";显示值:" + myCb.getRawValue()); } } }); }
相关推荐
首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
extjs6 的日期时间控件,在日期控件的基础上添加了时间控件,使用combobox下拉选择时间,比使用numberfield更易操作。
课程简介: ExtJS是一种主要用于创建前端...第十八讲.ExtJS之ComboBox获取远程数据、网页计算器 第十九讲.ExtJS之组件面向对象编程(一) 第二十讲.ExtJS之组件面向对象编程(二) 项目实战Extjs版在线选课系统:
18、ExtJS之ComboBox获取远程数据、网页计算器5 W& ]. W7 ?, V/ Q 19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求分析、数据字典、数据库设计) r, `+ J( `$ l# d7 I$ h# W...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
ExtJS4.1学习心得及源码 目录 一、安装与配置 ...六、ComboBox控件 七、Panel面板 八、Viewport 九、表单Form 十、窗口 十一、消息对话框 十二、ExtJS与Webservice应用 十三、自定义组件 十四、地图
本方法和用checkbox, listbox等控件和事件拼凑出来的不同,本方法是一个集成的独立控件,基本实现了控件的顺滑度,下拉框可悬浮等效果,可以认为是comboBox的升级版,使用方便,仅需引用编译好的DLL,直接在toolBox...
简介 在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,像下拉树和下拉表格都是很常见的控件,对于刚使用Ext的人来说,自定义一个控件好难,其实多读官方的源码有些事情就不会那么...
基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版), *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...
SearchComboBox: 扩展ExtJs4的combobox控件,当输入框改变时就会向后台发送请求,展现数据。TreeField: 扩展ExtJs4的Ext.form.field.Picker类,当点击下拉框时,异步加载树形结构数据的所有层级,需要后台提供树形...
EXTJS 学习笔片段1 Form ComboBox 远程ComboBox 替代页面上已经存在的Select控件 Grid EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口(模态窗口) ...
GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度可定制的组合下拉框...
原因是客户的物料种类非常多,有一千种之多,如果单纯用一个Combobox,那么在实际使用中,很难快速找到一个物料,所以,我使用包含物料分类和物料品牌的两个combobox来组成级联式筛选。问题恰恰出在这儿,如果在...
ExtJS在修改这样的页面上赋值是很方便的,在正文中1.2.1代码中可以看出,一行代码就可以搞定,但这是对于普通控件而言,如文本框。对于ComboBox可没这么简单...
jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。 与extjs相似,都是基于JQuery的一个前台ui界面的插件,功能相对没extjs...
jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。 jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,...
jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大...
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 ...