`
- 浏览:
161295 次
- 性别:
- 来自:
成都
-
第一次弄EXTJS的时候就在远程加载XML数据的时候给卡住了。做了N多个例子,百度N回都弄不出来,当时就停下来了。因为后来一直没有时间去学,所以之后对EXTJS一直有一种恐惧感!!!!!
现在看着别人用EXTJS做的东西确实好。而自己也觉得如果真的能够不需要美工的帮忙就能够完成一套界面漂亮的东西,那也是很让人兴奋的事情。于是自己又开始从头再来,继续学习ExtJS。不过还是在远程加载数据的时候出问题了(JSON,XML都不好使)。后来又去百度,以前看过的内容又给搜索出来了。这次把Y梨老师的blog里面的一些笔记好好的看了一下。对Ext.data.Store有了更多的了解,自己动手又去练习了一下,结果出来了完全正确。确实很兴奋!!!没完呢,自己马上又到百度里面去找相关东西来看,这次好像什么都能够看懂了似的,看一下子就明白了,而且自己上手去做,做一次结果就能够出来。后来发现之前第一次学的时候只要自己坚持一下,在那个store.load()上面多花点心思,完全可以把问题解决,害得自己浪费这么多的时间.菜鸟确实只能够是菜鸟,可我真的不想当菜鸟(废话)
下面就把相关的创建Ext.data.Store的方法贴出来,以备哪天忘记了,再来看看。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ExtJS-Window.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
href="../Ext/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script>
Ext.onReady(function(){
/*
第一种创建store的方法(用的是ArrayReader来实现的,SimpleStore其实就是对ArrayReader的封装)
var data = [["01","thtwin","25"],["02","thtwinj2ee","23"]] ;
var store = new Ext.data.SimpleStore({
auteLoad:true, //此处设置为自动加载
data:data,
fields:["id","name","age"]
}) ;
// 上面设置为自动加载,所以下面直接用没有问题,如果用store.load();或许下面就会出错
alert(store.getCount()) ; //得到的结果为:2 (是正确的)
*/
/*
第二种为将相应的数据名称(相当于Record里面的字段)单独提取出来形成一个数组,然后直接用变量名去充当配置项:fields
var data = [["01","thtwin","25"],["02","thtwinj2ee","23"]] ;
var fields = ["id","name","age"] ;
var store = new Ext.data.SimpleStore({
auteLoad:true,
data:data,
fields:fields
}) ;
alert(store.getCount()) ;//得到的结果为:2
alert(store.getAt(0).get("name")) ;//得到的结果为:thtwin
*/
/*
第三种创建store的方法,用到的常用的那种方法.Store中配置了proxy(数据来源属性),reader(数据解析方式属性)
var data = [["01","thtwin","25"],["02","thtwinj2ee","23"]] ;
var fields = ["id","name","age"] ;
var record = Ext.data.Record.create([
{name:"id"},
{name:"name"},
{name:"age"}
]) ;
var store = new Ext.data.Store({
// autoLoad:true,
// data:data, //如果上面不用autoLoad:true,则此处用data:data就会报this.proxy为空的错误,而像下面那样子就不会出错.用了proxy
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader(
{id:"id"},
//{}, //此处为{}表示没有原数据信息
fields
//record //此处一般用Recrod对象不过像上面那样子用一个一维数组也可以
)
}) ;
store.load() ;
alert(store.getCount()) ;
*/
/*
var store = new Ext.data.Store({
url:"http://localhost:8080/TestExtJS/Store/storejson.jsp",
//proxy:new Ext.data.HttpProxy({url:"http://localhost:8080/TestExtJS/Store/storejson.jsp"}),
autoLoad:true,
reader:new Ext.data.JsonReader(
{totalProperty:"results",root:"rows",id:"id"},
Ext.data.Record.create([
{name:"id"},
{name:"name"},
{name:"age"}
])
)
}) ;
// store.load() ;
alert(store.getCount()) ;
*/
/*
第四种创建通过指定store的proxy来指定数据来源(来源于服务器的数据),通过reader来指定将要解析数据的格式形式(此处用的是json数据格式)
var proxy = new Ext.data.HttpProxy({url:"http://localhost:8080/TestExtJS/Store/storejson.jsp"}) ;
var record = Ext.data.Record.create([
{name:"id"},
{name:"name"},
{name:"age"}
]) ;
var reader = new Ext.data.JsonReader({
root:"rows",
tottalProperty:"results"
},record) ;
var store = new Ext.data.Store({
proxy:proxy,
reader:reader
//autoLoad:true
}) ;
store.load({
callback:function(records,options,success){
if(success == true){
alert(store.getCount()) ;
}else{
alert("返回失败") ;
}
}
}) ;
自己以后得注意:
下面直接显示store里面记录的条数,这样子会出错,因为可能store还没有加载数据完成,程序就执行下面的语句了
而得到的结果也表明是这么回事,得到的结果总是0 而通过单击下面的按钮结果就正确了为2
json数据内容如下:
{results:2,rows:[{id:'1',name:'test',age:'32'},{id:'2',name:'test',age:'32'}]}
单击按钮得到的结果为:2
如果将json的数据格式换成:
{results:2,rows:[{id:'1',name:'test',age:'32'},{id:'1',name:'test',age:'32'}]}
得到的结果为:1
因为用id来唯一的标识一条记录,而现在id都一样,所以就只有一条了
alert(store.getCount()) ;
new Ext.Button({
text:"查看store加载数据之后的结果",
renderTo:Ext.getBody(),
listeners:{
"click":function(){
alert(store.getCount()) ;
}
}
}) ;
*/
// 第五种创建数据源来自己服务器的XML数据,而解析器为对应的XmlReader
var record = Ext.data.Record.create([
{name:"id"},
{name:"name"},
{name:"age"}
]) ;
var proxy = new Ext.data.HttpProxy({url:"http://localhost:8080/TestExtJS/Store/data.xml"}) ;
/*
XML中的数据如下:
<?xml version="1.0" encoding="UTF-8"?>
<datasets>
<rows>
<id>1</id>
<name>thtwin</name>
<age>23</age>
</rows>
<rows>
<id>2</id>
<name>thtwinj2ee</name>
<age>23</age>
</rows>
</datasets>
*/
var reader = new Ext.data.XmlReader(
{
id:"id",
record:"rows"
},
record
) ;
var store = new Ext.data.Store({
// autoLoad:true,
proxy:proxy,
reader:reader
}) ;
store.load() ;
new Ext.Button({
text:"查看加载数据之后的结果",
renderTo:Ext.getBody(),
listeners:{
"click":function(){
alert(store.getCount()) ;
alert(store.getAt(0).get("name") + " " + store.getAt(1).get("name")) ;
}
}
}) ;
}) ;
</script>
</head>
<body>
<div id="myPanel"></div>
</body>
</html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
extjs动态生成model、store、panel;sql拼接等多种技术难点
去除extjs4.2MVC中的Model层和Store层,使用工厂模式来创建Model层和Store层简化代码。
EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端...
1、在创建store时,需要设置groupField属性的值,即为需要分组的值 for example: JavaScript代码 Ext.define('Person', { extend: 'Ext.data.Model', fields: ['name', 'sex'] }); 在这个数据模型中,我们需要以...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
六、Ext.Element类中的动画函数 34 七、小结 35 第六章:元素操作与模板 36 一、重要也不重要的东西 36 二、Ext.DomHelper类 36 三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
EXTJS 学习笔片段1 Form ComboBox 远程ComboBox 替代页面上已经存在的Select控件 Grid EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口(模态窗口) ...
郁闷 我在鼠标左侧点击tree节点,在右侧创建一个标签页,这个已经能够实现,于是我再在新建的标签页里嵌套一个Grid。 奇怪的问题出现了。。 FF和IE下都没报错。但是Grid就是不显示。本来我以为我代码错误。于是我狂...
因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要... 在方法之前我的关于multiselect对象的store是这样定义的: 代码如下:flowDs = n
ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为...
要创建Grid Panel,首先要定义Model,Model包括了Grid Panel所有需要显示的字段,相当于数据库中表字段的集合。Store可以看作是一行数据的集合或者是Model的实例集合,每个Store都包含一个或多个Model实例,Grid ...
4.3.3 ext.function中的静态方法 / 120 4.3.4 ext.array中的静态方法 / 127 4.3.5 ext.error中的静态方法 / 133 4.4 深入了解类的创建及管理 / 135 4.4.1 开始创建类 / 135 4.4.2 创建类的类:ext.class / 137...
主要配置项:store:表格的数据集、columns:表格列模式的配置数组,可自动创建ColumnModel列模式等等
//在这里使用Store来创建一个类似于数据表的结构,因为需要远程获取数据,所以应该使用 //HttpProxy类,我是从后台读取的是json数据格式的数据,所以使用JsonReader来解析; var proxy = new Ext.data.HttpProxy...
//创建面板 Ext.create(‘Ext.grid.Panel’, { title: ‘easy grid’, width: 400, height: 300, renderTo: Ext.getBody(), frame: true, viewConfig: { forceFit: true, stripRows: true }, store: {//配置数据...
indexedDB的CURD ...创建新表 db.CreateTable("product", "id"); 插入和更新命令 db.set({ id: 1, name: "milad" }, "product"); 获取数据 db.get(1, "product"); 删除数据 db.remove(1, "product");
需要注意的是,生成的EXTjs 是商业体验版本,如果你购买了,那么你需要下载ext js的zip包,并且使用-SDK命令来制定SDK的路径,这样,就不会去默认下载SDK而是按照你本地的文件来生成了。 命令如下: sencha -sdk /...