‘ExtJS’ 分类下的所有文章
2010十月1

例子

ExtJS 评论关闭

,拆线图

//数据,JSON
var murl = ‘data.aspx’;
var store = new Ext.data.JsonStore({
url: murl,
autoLoad:true,
root: ‘images’,
fields: ['name', 'visits', 'views']
});

//显示
new Ext.Panel({
iconCls:’chart’,
title: ‘ExtJS.com Visits Trend, 2007/2008 (Simple styling)’,
frame:true,
renderTo: ‘container’,
width:500,
height:300,
layout:’fit’,

items: {
??? xtype: ‘linechart’,
??? store: store,
??? url: ‘../ExtLib/resources/charts.swf’,
??? xField: ‘name’,
??? yField: ‘visits’,
??? yAxis: new Ext.chart.NumericAxis({
??????? displayName: ‘Visits’,
??????? labelRenderer : Ext.util.Format.numberRenderer(’0,0′)
??? }),
??? tipRenderer : function(chart, record){
??????? return Ext.util.Format.number(record.data.visits, ’0,0′) + ‘ visits in ‘ + record.data.name;
??? }
}
});

2010十月1

EXTJS基本语法

ExtJS 评论关闭

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”>&nbsp;</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类型
});
});

2010十月1

EXTJS简介

ExtJS 评论关闭

1, EXTJS:UI全部帮你搞定,不用费劲去弄样式! 浏览器兼容性好,在各各浏览器下测试都OK! 和后台代码无关,不管后面用C#也好 JAVA也好 还是PHP 都和它没关系。 动画效果,EXTJS的动画效果做得很不错,提高了用户的感知度。
缺点: 开发周期延长(要先学习才能灵活使用)
2,ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。