Warning: Undefined array key "HTTP_REFERER" in
/www/wwwroot/prod/www.enjoyasp.net/wp-content/plugins/google-highlight/google-hilite.php on line
58
1，引入文件：应用extjs 需要在页面中引入extjs 的样式及extjs 库文件，样式文件为resources/css/extall.css，extjs 的js 库文件主要包含两个，adapter/ext/ext-base.js 及ext-all.js，其中ext-base.js 表示框架基础库，ext-all.js 是extjs 的核心库
2， 提示框调用：Ext.Msg.alert(“提示”,”须提供订单号！”);? 需要注意的是 MessageBox 对象是异步的。不同于 JavaScript中原生的alert（它会暂停浏览器的执行），显示 MessageBox 不会中断代码的运行。由于这个原因，如果代码需要在用户对 MessageBox 做出反馈之后执行，则必须用到回调函数 Ext.Msg.alert(“提示”,”须提供订单号！”, myfunction);
Ext.Msg.show({
title:’Save Changes?’,
msg: ‘You are closing a tab that has unsaved changes. Would you like to save your changes?’,
buttons: Ext.Msg.YESNOCANCEL,
fn: processResult,? //执行完之后要调用的函数
animEl: ‘elId’,
icon: Ext.MessageBox.QUESTION
});
function processResult(){
alert(‘bbb’);
}
相应的还有：confirm，prompt
3，创建组件：
var obj={title:”hello”,width:300,height:200,html:’Hello,easyjf open source’};
var panel=new Ext.Panel(obj); panel.render(“hello”);? //hello控件的ID，将在ID为hello的控件上创建一个面板，或直接在obj内用renderTo指定。
<div id=”hello”> </div>
在api中找到要用的控件，用new创建，要传的参数用obj建立，里面即是api指示的属性。最后通过render输出。
如：new Ext.Button({id:”btn”,text:”myButton”}).render(“hello”);
new Ext.form.TextField({id:”btn”,value:”first”,width:200}) .render(“hello”);
4，事件
Ext.get(“btnAlert”).addListener(“click”,a);
//为ID为btnAlert的控件增加click事件 a等同于：document.getElementById(“btnAlert”).onclick=a;
延迟处理：Ext.get(“btnAlert”).on(“click”,a,this,{delay:2000});? //为btnAlert增加a方法，延迟2秒执行
5,面板
面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。
6，窗口
var i=0;
function newWin()
{
var win=new Ext.Window({title:”窗口”+i++,
width:400,
height:300,
maximizable:true});
win.show();
}
Ext.onReady(function(){
Ext.get(“btn”).on(“click”,newWin);
});
7，布局
ExtJS 的容器组件包含一个layout 及layoutConfig 配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局，该布局只是简单的把元素放到容器中，，常用的布局有border、column、fit、form、card、tabel等布局。
使用方式：指定布局方式，指定位置（可选）
Ext.onReady(function(){
new Ext.Panel({
renderTo:”hello”,
width:400,
height:200,
layout:”column”,
items:[{columnWidth:.5,
title:”面板1″},
{columnWidth:.5,
title:”面板2″}
]
});
注：items:传入的单独一个项，应直接传入一个对象的引用（ 如items: {…}）。多个项应以数组的类型传入（如items: [{…}, {…}]）。
如：items:[
{fieldLabel:”请输入姓名”,name:”name”,xtype:”button”,text:”hello”},
//用xtype指定使用的控件，控件类型为Ext.Componentxtype
{fieldLabel:”请输入地址”,name:”address”}] //默认为textbox
1）Column布局：layout:”column” 在items中用ColumnWidth指定占据的宽度即可
2）Border区域布局 。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示
layout:”Border” 在items中用region:”east” 指定位置。
3）fit布局：自动用子填充父容器，以第一个子为主，其它加上也是无用。
4） Form 布局是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用，在实际应用中，Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel还会创建与<form> 标签相关的组件，因此一般情况下我们直接使用FormPanel 即可。
new Ext.form.FormPanel({
renderTo:”hello”,? //指定输出
title:”容器组件”,
width:300,
labelAlign:”right”,
height:120,
defaultType: ‘textfield’,
items:[
{fieldLabel:”请输入姓名”,name:”name”},
{fieldLabel:”请输入地址”,name:”address”},
{fieldLabel:”请输入电话”,name:”tel”}
] }
);
});
5)Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式,有个动态的上下卷动效果。在窗口属性 layoutConfig 中指定布局配置参数animate 为true，表示在执行展开折叠时是否应
用动画效果。
6）Table 布局，该布局负责把容器中的子元素按照类似普通html 标签排列
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:”hello”,
title:”容器组件”,
width:500,
height:200,
layout:”table”,
layoutConfig: {
columns: 3?? //指定列数
},
items:[{title:”子元素1″,html:”这是子元素1中的内容”,rowspan:2,height:100}, //指定每个占用的td
{title:”子元素2″,html:”这是子元素2中的内容”,colspan:2},
{title:”子元素3″,html:”这是子元素3中的内容”},
{title:”子元素4″,html:”这是子元素4中的内容”}
] }
);
});
8，表格控件：表格由类Ext.grid.GridPanel 定义，继承自Panel，其xtype 为grid。ExtJS 中，表格Grid必须包含列定义信息， 并指定表格的数据存储器Store 。表格的列信息由类Ext.grid.ColumnModel 定义、而表格的数据存储器由Ext.data.Store 定义，数据存储器根据解
析的数据不同分为JsonStore、SimpleStroe、GroupingStore 等。
1），显示数据，故要指定数据，在属性中有一store，用来指定数据，此外还有有列名，列名用cm定义
Ext.onReady(function(){
//指定数据
var data=[ [1, ‘EasyJWeb’, ‘EasyJF’,’www.easyjf.com’],
[2, ‘jfox’, ‘huihoo’,’www.huihoo.org’],
[3, ‘jdon’, ‘jdon’,’www.jdon.com’],
[4, ‘springside’, ‘springside’,’www.springside.org.cn’] ];
var store=new Ext.data.SimpleStore({data:data,fields:[“id”,”name”,”organization”,”homepage”]});
//指定列名
var colM=new Ext.grid.ColumnModel([{header:”项目名称”,dataIndex:”name”,sortable:true},
{header:”开发团队”,dataIndex:”organization”,sortable:true},
{header:”网址”,dataIndex:”homepage”}]);
//创建
var grid = new Ext.grid.GridPanel({
renderTo:”hello”,
title:”中国Java开源产品及团队”,
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:2
});
});
9，可编辑表格控件EditorGridPanel，可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由
类Ext.grid.EditorGridPanel 表示，xtype 为editorgrid。使用EditorGridPanel 与使用普通的GridPanel 方式一样，区别只是在定义列信息的时候，可以指定某一列使用的编辑即可。
var colM=new Ext.grid.ColumnModel([{
header:”姓名”,
dataIndex:”name”,
sortable:true,
editor:new Ext.form.TextField()},
{header:”性别”,
dataIndex:”sex”
},
。当对一个单元格进行编辑完之后，就会触发afteredit 事件，可以通过该事件处理函数来处理单元格的信息编辑，把编辑后的数据保存到服务器。
10，数据存储Stroe
1）,record ，一个Record 可以理解为关系数据表中的一行，也可以称为记录。Record 对象中即包含了记录（行中各列）的定义信息（也就是该记录包含哪些字段，每一个字段的数据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值）。
Ext.onReady(function(){
var MyRecord = Ext.data.Record.create([?? //指定列
{name: ‘title’},
{name: ‘username’, mapping: ‘author’},
{name: ‘loginTimes’, type: ‘int’},
{name: ‘lastLoginTime’, mapping: ‘loginTime’, type: ‘date’}
]);
var r=new MyRecord({?? //赋值
title:”日志标题”,
username:”easyjf”,
loginTimes:100,
loginTime:new Date()
});
alert(MyRecord.getField(“username”).mapping);
alert(MyRecord.getField(“lastLoginTime”).type);
alert(r.data.username);
alert(r.get(“loginTimes”));
});
2） store:一个Store 包含多个Record，同时Store 又包含了数据来源，数据解析器等相关信息，Store 通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy)，并转换成记录集的形式保存在Store 中，作为其它控件的数据输入。
数据存储器由Ext.data.Store 类定义，一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作
DataReader:
ArrayReader Ext.data.ArrayReader－数组解析器，用于读取二维数组中的信息，并转换成记录集Record对象
JsonReader? Ext.data.JsonReader－Json 数据解析器，用于读取JSON 格式的数据信息，并转换成记录集Record 对象
XmlReader??? Ext.data.XmlReader－XML 文档数据解析器，用于把XML 文档数据转换成记录集Record对象
DataProxy: DataProxy 字面解释就是数据代理，也可以理解为数据源，也即从哪儿或如何得到需要交给DataReader 解析的数据。
11 、TreePanel
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:”root”,
text:”树的根”});
root.appendChild(new Ext.tree.TreeNode({
id:”c1″,
text:”子节点1″
}));
var tree=new Ext.tree.TreePanel({
renderTo:”hello”,
root:root,
width:100? //可用loader: new Ext.tree.TreeLoader({url:”treedata.js”}), 来动态加载数据，此时root要用AsyncTreeNode类型
});
});
