在ext中大多数数据的来源是直接从数据源中取得的,我在些项目的时候combo(下拉框)用的尤其多,包括下拉框的联动问题都是基于数据源的变化来得到的。
数据源的创建:
数据源的创建现在只知道两种方式:
第一种:
var dsPro = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: 'post',
url:""
}),
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'total',
fields: ['id','text']
})
});
第二种:
var gameds = Ext.extend(Ext.data.Store,{
proxy: new Ext.data.HttpProxy({
method: 'post',
url:" "
}),
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'total',
fields: ['gameId','gameName']
})
});
var form_gameds = new gameds();
区别:第一种直接
new一个数据源赋值给所需变量,使用的时候可以直接使用。
第二种不能直接使用,使用的时候重新设置变量,然后new它。
个人感觉第一种的数据干扰性比较强,不知道是什么具体的原因,像好多combo(下拉框)在使用同一个名字的数据源(虽然有时候都不在一个js文件夹中)的时候,数据竟然会干扰,在另一个combo中选择了相应的值,在另一个combo中不选择也默认选择的相同的值,隐藏的值会被赋值,到现在都不知道为什么。而且下拉的数据联动也有问题,即:有时候选择了显示的值,但是隐藏值没有!!十分坑爹。在另一个数据源使用这个隐藏值作为参数进行加载的时候,就没有参数值了,参数值为空,结果这个数据源就肆无忌惮的加载,有时会把数据库里所有的数据都刨根问底的刨出来。联动效果显示的乱七八糟,直到我直到了第二种设计数据源的方法,就再没有出现过这种情况。原因还是归结为数据干扰的问题吧!
数据源中有两个很重要的属性,必不可少的,proxy和reader,proxy是根据用new Ext.data.HttpProxy({})来生成,Ext.data.HttpProxy({})这个还不太了解,proxy是根据其中的url来获取原始的数据,然后通过reader把原始数据转换成record实例,后放入store中,至此store创建完毕。
Store.load()方法来实现上述的转换过程,如果没有load()这个方法的执行,上面的数据源是不进行加载的,除非在创建数据源的时候加上另一个属性autoload:true,这样在数据源进行创建时久自行加载,在可以使用数据源的时候数据源就会有数据,如果不加autoload属性,默认为false,那么在之后使用数据源的时候只能进行自行加载,否则数据源里是没有数据的。
Proxy中的url所对应的方法,返回的数据要对应下面reader的读取数据类型,这里即是JSON型的,JSON只会用一点,具体不太了解。
有时候我们会用到fields里面的数据因为参数的变化可能会进行变化,在我第一次写代码的时候,首先想到的是在数据源进行load的时候重新设计reader,即让reader重新读取得来的原始数据,把reader中的fields属性用变量代替,然后通过变化这个变量来改变reader,其实我觉得到现在这里都是可行的(没有试验过),但是现在还是不能游离的把某一个数据源的reader来调用到,改变数据源的reader必须在load之前(好像是废话,但是开始学的时候废了好大力气)。最后我的解决办法:按照这个变量的名字重新new一个出来,也就是根据创建store的时候才能重新设计reader。
利用数据源进行combo(下拉框的联动),上面已有说过部分,这里在系统写下,以便日后自己都不知道自己做了什么!
原理:每一个combo都有自己的数据源,联动只不过是解决了在选第一个数据的时候,选择的数据对下一个数据源造成了特定的影响,从而使第二个数据源的数据有了限制!
PS:这里还得说下combo怎么去跟数据源关联。具体看combo的介绍(之后再总结)。先简单说下,必须要由以下几个属性:store:数据源名字,displayField:’显示的值’,valueField:’隐藏值’,mode:’加载数据源方式’,typeAhead:true,
triggerAction: 'all',这些跟数据源有关的属性基本就这些了。设置好!
在选择第一个combo值得时候也就是进行select的时候对他影响的combo所加载的数据源进行加参数,加载!
listeners:{
select:{
fn:function(combo,record,index) {
Ext.getCmp('server').clearValue();//清空combo为server中的显示
form_serverds.removeAll();//清空当中的数据源数据
form_serverds.load({
params:{areaId:Ext.get('form_areaId').dom.value}
});//对影响的数据源加参数进行加载
}
}
}
Listeners
是combo的一个属性,监听是否有select事件,有的时候进行触发。懂了很简单…当时头都大两圈。
分享到:
相关推荐
四、Ext.data.ProxyExt.data.Proxy是数据源的抽象层,负责与服务器进行数据交互。在本例中没有直接提及Proxy,但通常Store会关联一个Proxy来处理数据请求。Ext.data.HttpProxy和Ext.data.ScriptTagProxy是两种常见的...
在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...
你可以通过设置`store`属性来指定下拉列表的数据源,通常是一个`Ext.data.Store`对象,包含一组记录。`displayField`属性定义了在下拉列表中显示的字段。 2. **多选配置**: 要将`ComboBox`转换为多选下拉框,你需要...
在处理数据时,`Ext.data.Store`是一个至关重要的组件,它用于存储和管理数据,可以与各种数据源进行交互。当我们需要从XML文档中提取数据并加载到`Store`时,就涉及到`Ext.data.reader.Xml`。这篇博客文章《Ext....
Ext数据模型中的Store是EXT框架中非常核心的一个概念,它是数据管理的主要接口,负责存储和管理数据集。Store内部使用了`Ext.util.MixedCollection`数据结构,这使得它可以同时作为映射和列表来操作数据,并在数据...
《Ext-JS-3-Cookbook源码》是关于Ext JS 3.x版本的一个实践教程,其中包含了完整的源代码示例。这个压缩包文件提供了丰富的代码资源,旨在帮助开发者深入理解并掌握Ext JS 3的核心功能和应用技巧。 Ext JS是一个...
4. **数据绑定**: 探索如何使用ExtJS的数据模型和Store与ASP.NET的数据源(如GridView、ListView)进行绑定,实现数据的异步加载和更新。 5. **布局管理**: 学习各种ExtJS布局(如fit、border、form等),以及如何...
本示例“Ext2.2-用XML做数据源,可编辑Grid的例子.rar”聚焦于如何利用Ext JS的Grid组件,并结合XML数据源来实现一个可编辑的数据网格。 在Web应用中,数据展示和编辑是常见的需求。Grid组件是Ext JS处理表格数据的...
<link id="theme" rel="stylesheet" type="text/css" href="ext/2.0/resources/css/xtheme-default.css" />2、定义一个combox,将可选样式作为数据源填入下拉列表: 定义样式数据 Ext.simpledata.themes = [ ['...
2. **数据源(Data Source)**:在`ext--grid--demo`中,数据通常通过JSON格式从服务器获取。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在Ext ...
数据绑定机制使得UI与后端数据源之间的交互变得简单,无需手动编写大量的DOM操作代码。布局管理器则确保了在不同屏幕尺寸和分辨率下,组件能自适应地排列和显示。 在"ext-3.2-beta"文件夹中,你可能会找到以下关键...
在"EXT-GRID+JSON简单应用"中,我们将探讨如何使用EXT-JS的Grid组件与JSON数据源进行集成,以创建一个动态的数据表格。 EXT-JS的Grid组件允许开发者通过定义列模型、存储器和视图来展示数据。在JSON方面,它是一种...
在EXT Designer中,可以通过“New Store”按钮创建一个新的Store,并设置数据源、模型定义以及数据加载方式。 5. 绑定数据:将创建的Store与Grid关联,使得数据能正确显示在Grid中。在Grid的配置中找到“store”...
EXT.NET的Store组件与服务器端的数据源进行交互,例如数据库。在Pagination.aspx.cs中,你可能会看到如下代码来填充Store: ```csharp protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) ...
EXT Grid通常使用Store对象来处理数据模型,Store可以连接到各种数据源,如JSON、XML或者远程API,通过Ajax请求加载数据。 1. 数据绑定(Data Binding): 数据绑定是EXT Grid的核心特性之一,它允许Grid与数据源...
4. **数据存储**:Ext JS 3.4.0包含了一种名为“Store”的数据存储机制,它可以连接到各种数据源(如XML、JSON、Ajax),并提供数据加载、过滤、排序和分页等功能。 5. **表格网格**:Ext JS的GridPanel是其最知名...
- 示例存储(Store):配置数据源和加载机制。 - 视图组件(View):如表格、表单等,显示和编辑数据。 - 控制器(Controller):包含处理用户交互的代码,如按钮点击事件的监听器。 - 应用配置(App.js):定义应用...
3. **数据绑定**:Ext JS 提供了双向数据绑定机制,使得UI组件可以直接与数据源进行同步,当数据源发生变化时,UI会自动更新,反之亦然,简化了数据驱动的界面更新。 4. **Store和Model**:Store是用来存储数据的...
GridPanel可以连接到各种数据源,如ADO.NET、Entity Framework等,实现数据的展示、编辑和操作。同时,GridPanel还支持行选择、列隐藏、分组等功能,这在Web应用的数据管理中非常常见。 FormPanel实例则展示了EXT...
通常,数据源会包含`children`字段来表示节点的子节点。 扩展控件"UxTreeGrid"很可能是一个社区或者第三方开发的组件,它可能提供了额外的功能,比如: 1. **增强的排序和过滤**:可能提供了更复杂的排序算法,...