Extjs相关知识点梳理
store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表
方法:不列举继承来的方法
Store( Object config )
构造,config定义为{
autoLoad : Boolean/Object, //自动载入
baseParams : Object, //只有使用httpproxy时才有意义
data : Array, //数据
proxy : Ext.data.DataProxy,//数据代理
pruneModifiedRecords : boolean,//清除修改信息
reader : Ext.data.Reader, //数据读取器
remoteSort : boolean, //远程排序?
sortInfo : Object, //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象
url : String, //利用url构造HttpProxy
}
filterBy( Function fn, [Object scope] ) : void
更强悍的过滤方法.fn接收两个参数record和id
find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
找到符合条件的第一条记录,参数同filter
findBy( Function fn, [Object scope], [Number startIndex] ) : Number
参见filterBy
getAt( Number index ) : Ext.data.Record
getById( String id ) : Ext.data.Record
依充号/id得到record对象
load( Object options ) : void
由指定的Proxy使用指定的reader读取远程数据
loadData( Object data, [Boolean append] ) : void
用法比load简单一点,目的是一样的,只是这次数据由本地读取
reload( [Object options] ) : void
重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次load时使用的参数
http://blog.csdn.net/xiaohewoai/article/details/4091604
ExtJS本质上也是一个AJAX的框架，但是它和DWR有很大不同，首先，DWR是JAVA世界的产物，而ExtJS是后台无关的。也就是说，ExtJS的后台可以是.NET,PHP或者JAVA都可以。其实我们在网上看到的大部分例子都是PHP或者.NET,后台的。这说明ExtJS在所有后台都很受青睐。其次，DWR只关注客户端与服务器端的交互，没有自己的界面组件，而ExtJS最让人惊叹的就是其丰富而强大的界面组件，除此以外，它自身也能轻松地异步访问后台组件。
1. 首先是init-main.js，这里定义了整个应用的主体布局视图Viewport。它和我们HTML中的frameset有点类似。在我们的主显示区里还放了一个TabPanel，这就是我们桌面应用中常见的选项面板。要理解下面的JS呢，你必须先掌握JSON这种数据格式，这个格式我在前面的ExtJS应用中已经详细讲过，如果还不太清楚，到http://www.json.org/json-zh.html 去看看，JSON在整个ExtJS体系里占有重要地位，熟悉JSON格式的人会对名/值对，{}，[]很敏感。大家看到，在Viewport类和TabPanel类里都传入一个JSON对象来初始化整个组件。其次，你还要有容器和组件的概念，每个容器组件（容器同时也是组件，这是相对的，它放东西的时候是容器，被放置其中的时候就是组件！）都有一个items参数指定一个JSON数组来表明自己容纳的组件。
http://www.cnblogs.com/hannover/archive/2009/09/09/1563671.html
http://www.cnblogs.com/hannover/archive/2009/09/09/1563673.html
DAO里操作的主要是POJO类，而在我们的Service里面要做的就是DTO和POJO的转化工作。因为表现层的代码只会直接和DTO打交道。这就是严格的JavaEE分层。说到这里，可能有人开始迷惑了。我们这里说明一下：在javaEE企业级开发中，我们一般提倡四层架构体系：WEB表现层->业务逻辑层（服务层）->持久层（数据访问层）->数据库层，我们这里分别使用Struts，Spring，Hibernate来充当前三个层次的框架。一般我们把Action归为Struts所在表现层，Service归为Spring所在业务逻辑层（实际上，Spring是一个系统级别的框架，它的内涵和外延都比另外两个框架要来的大！），DAO归为Hibernate所在持久层，而在每一层上都有特定的传值组件（呵呵，有人不喜欢用大词，通俗点说，所谓传值组件在javaEE体系中就是在页面和数据库之间帮忙传递数据的用JAVA写的类！），我们自动，Struts里有ActionForm，Hibernate里有POJO,那在Spring管辖的业务逻辑层，主要就是DTO。所以我们的数据经常在这3个传值组件之间传递。
这里create和convert的配置大家注意下，所谓create就是创建一个JavaScript类和Java类的关联映射。我们这里只有一个创建器，它会在客户端本地动态生成一个houseService.js文件，然后它对应Spring框架管理的一个名为houseService的Bean，主要客户端只要引用houseService.js这个文件，就能调用到服务器端houseService的方法。那么，要是我只想向外界公开少数几个方法呢？（涉及到安全问题），我们就可以用include配置了。那么，这不就行了吗？还需要convert干什么呢？恩，等一下。如果我们要在服务器端给客户端传递一个DTO对象，或者是放置着若干DTO对象的集合对象时。或者反过来，我们在客户端给服务器端传递一个JavaScript对象时。DWR怎么做JavaScript对象和DTO对象之间的解析？如果你不给它相关信息，它是做不到的，这就是convert的作用了。也就是说，create指定的对象被创建，convert指定的对象（客户端和服务器端之间携带传递的参数）被转换！
http://www.cnblogs.com/hannover/archive/2009/09/09/1563664.html
ExtJs4.1:取得一个已存在Store的reference
//取得'StoreXiang'的reference
var StoreXiang = Ext.data.StoreManager.lookup('StoreXiang');
* 取得Srore的reference，并将其赋给gridPanel的store属性：
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
http://blog.csdn.net/bq_cui/article/details/8527841
在4系中，grid的类是Ext.grid.Panel，由两个必要的部分组成：Store和columns，其中Store为Ext.data.Store或者Ext.data.DirectStore对象的实例，columns为Ext.grid.Panel实例的属性。
一个最简单的grid：
测试网页：test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script src="ext/ext-all.js" type="text/javascript"></script>
<script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script src="js/test.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
test.js
Ext.onReady(function() {
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
})
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
这是一个最简单的grid实现过程，使用memoryProxy在内存中读取json数据，只有数据显示功能。通常情况下，我们不会把grid直接渲染到body，而是到另外的container，所以herght、width、renderTo属性不是必须的。必须有的两个属性分别是store和columns。其中columns直接在Ext.grid.Panel实例化时通过Ext.create参数设置，store为Ext.data.Store或者Ext.data.DirectStore的实例，通常使用Ext.data.StoreManager.lookup()函数搜索StoreManager中注册的storeId得到。也可以指定实例名称，效果完全相同，方法如下：
Ext.onReady(function() {
var simpsonsStore = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: simpsonsStore,
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
})
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
也可以通过4系最新提供的Ext.define函数首先定义自己store类，先不实例化，在Ext.grid.Panel实例化过程中实例化store，优势是可以根据需要实例化相应的store，节省资源。
可以通过4系提供的new()函数实例化store，如下：
Ext.onReady(function() {
Ext.define('simpsonsStore',{
extend:'Ext.data.Store',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: new simpsonsStore,
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
})
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
最简单，也是最基础的使用方法就是上面这个了，今天就说这么多，明天说说columns的设置。
其它
http://www.cnblogs.com/zhangwei595806165/archive/2012/12/13.html
Extjs相关知识点梳理的更多相关文章
- Java并发相关知识点梳理和研究
1. 知识点思维导图 (图比较大,可以右键在新窗口打开) 2. 经典的wait()/notify()/notifyAll()实现生产者/消费者编程范式深入分析 & synchronized 注 ...
- Mysql相关知识点梳理(一)：优化查询
EXPLAIN解析SELECT语句执行计划: EXPLAIN与DESC同义,通过它可解析MySQL如何处理SELECT,提供有关表如何联接和联接的次序,还可以知道什么时候必须为表加入索引以得到一个使用 ...
- Caffe学习系列（二）Caffe代码结构梳理，及相关知识点归纳
前言: 通过检索论文.书籍.博客,继续学习Caffe,千里之行始于足下,继续努力.将自己学到的一些东西记录下来,方便日后的整理. 正文: 1.代码结构梳理 在终端下运行如下命令,可以查看caffe代码 ...
- [独孤九剑]Oracle知识点梳理（九）数据库常用对象之package
本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...
- [独孤九剑]Oracle知识点梳理（三）导入、导出
本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...
- Javascript重要知识点梳理
Javascript重要知识点梳理 一.Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for 二.Javas ...
- UITableView相关知识点
//*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...
- Memcache知识点梳理
Memcache知识点梳理 Memcached概念: Memcached是一个免费开源的,高性能的,具有分布式对象的缓存系统,它可以用来保存一些经常存取的对象或数据,保存的数据像一张巨大的HAS ...
- Android开发涉及有点概念&相关知识点（待写）
前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...
随机推荐
- Spring Boot 应用系列 4 -- Spring Boot 2 整合log4j2
一.背景 1. log4j2传承于log4j和logback,它是目前性能最好的日志处理工具,有关它们的性能对比请看: 2. 除了性能好之外,log4j2有这么几个重要的新features: (1) ...
- 在每页（分页）报表中重复显示标题 - SQL Server Reporting Service (SSRS)
问题描述 TFS系统提供多种报表,有图表(Chart).Web面板(Dashboard).SharePoint面板.Excel报表,SQL Server Reporting Serivce(SSRS) ...
- bash基本命令速查表
来源:https://github.com/skywind3000/awesome-cheatsheets/blob/master/languages/bash.sh ################ ...
- Xamarin.Forms第三方XAML预览工具-LiveXAML简单体验
截至目前,Xamarin官方的Xaml Previewer工具仍然处于测试阶段,使用中也发现了各种不便,例如各种莫名其妙的渲染失败,或者提示需要编译项目才能渲染等等,复杂项目基本不可用, 完全没有体现 ...
- VisualStudio神级插件——JetBrains Resharper 2018.2.3 Ultimate完美破解版+教程
ReSharper是一个JetBrains公司出品的著名的代码生成工具,是Visual Studio里面的一个插件.它包括一系列丰富的能大大增加C#和Visual Basic .NET开发者生产力的特 ...
- poj 3250 Bad Hair Day（栈的运用）
http://poj.org/problem?id=3250 Bad Hair Day Time Limit: 2000MS Memory Limit: 65536K Total Submissi ...
- Netty 源码中对 Redis 协议的实现
原文地址: haifeiWu的博客 博客地址:www.hchstudio.cn 欢迎转载,转载请注明作者及出处,谢谢! 近期一直在做网络协议相关的工作,所以博客也就与之相关的比较多,今天楼主结合 Re ...
- JIT与JVM的三种执行模式：解释模式、编译模式、混合模式
Java JIT(just in time)即时编译器是sun公司采用了hotspot虚拟机取代其开发的classic vm之后引入的一项技术,目的在于提高java程序的性能,改变人们“java比C/ ...
- s11 day Linux 和nginx 部署
https://www.cnblogs.com/pyyu/p/9481344.html ,开机初始化的配置 iptables -F 清空防火墙 /etc/init.d/iptables stop ...
- docker和定时任务
查看linux信息 cat /etc/issue 以id运行容器docker start 1c3339d7f9a8通过id结束容器 docker kill 1c3339d7f9a8 Ubuntu 安装 ...