EXT攻略
EXT
Ext是一个强大的js类库，以前是基于雅虎UI,现在已经完全独立了。
主要包括data、widget、form、grid、dd、menu，其中最强大的应该算grid了，编程思想是基于面向对象编程(oop)，扩展性相当的好。可以自己写扩展，自己定义命名空间。
主要包括三个大的文件：ext-all.css,ext-base.js,ext-all.js（包括所有的类库，您可以根据需要进行删减。官方网站提供这一接口），在引用ext类库的时候，这三个文件必不可少。
它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧！其核心的组件基本覆盖了我们构建client的常用的组件。
从 Ext 2开始，商业版（针对那些以盈利为目的的开发方）要收费了。这可能会影响一些他的应用前景。
目前的最新版本为4.2。
介绍一下Ext预置的11个动画功能。
1.slideIn/slideOut：
元素的滑进或滑出效果。默认slideIn是从顶部滑进的，而slideOut是从底部滑出的，可通过修改第1个参数设置滑进或滑出位置。其使用方法请看下面代码。
var el = Ext.get('elId');
el.slideIn(); //从顶部滑进
el.slideOut(); //从底部滑出
el.slideIn('l',{ easing: 'easeOut', duration: .5 }); //从左边滑进
2.puff：元素慢慢向四周扩大并逐渐消失。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.puff();
//自定义方式，元素消失后删除元素
el.puff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false })
3.switchOff：元素闪烁一下，然后往中心折叠（类似关掉电视）。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.switchOff();
//自定义方式，元素消失后删除元素
el.switchOff({ easing: 'easeOut', duration: .5, remove: true, useDisplay: false });
4.highlight：利用设置的颜色高亮显示元素，然后逐渐消隐回原有颜色。默认是设置元素背景颜色，可通过设置attr属性设置高亮显示方式。如果没有初始颜色，可以使用endColor属性设置消隐后的颜色。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.highlight();
//自定义方式
el.highlight('0f0f0f',{ easing: 'easeOut', attr: 'color' duration: .5, endColor: 'dddddd' });
5.frame：从元素边界开始以水波扩散的方式提示用户。其使用方法请看下面代码。
var el = Ext.get('elId'); //默认方式
el.frame();
//自定义方式
el.frame('0f0f0f',{ duration: .5, });
6.pause：在队列中的动画开始之前产生一个停顿。其使用方法请看下面代码。
el.pause(1); //停顿1秒
7.fadeIn/fadeout：实现渐变效果。fadeIn方法从透明渐变到不透明。fadeOut方法从不透明渐变到透明。通过endOpacity属性可设置渐变结束后的不透明度。要注意在IE中可能要设置useDisplay属性为true。其使用方法请看下面代码。
var el = Ext.get('elId');
el.fadeIn();
el.fadeOut();
//自定义方式
el.fadeIn({ endpacity: 1, easing: 'easeOut', duration: .5 });
8.scale：将元素的尺寸从原有尺寸过渡到设置的尺寸。其使用方法请看下面代码。
var el = Ext.get('elId');
el.scale(100，200);
//自定义方式
el.fadeIn(100，200，{ easing: 'easeOut', duration: .5 });
9.shift：元素渐变到新的位置、新的尺寸和不透明度。该方法至少需要位置、尺寸和不透明度其中一项设置，不然元素不会被改变。其使用方法请看下面代码。
var el = Ext.get('elId');
el.shift({ width:100, //元素的新宽度
height: 100, //元素的新高度
x: 10 , //元素的新x坐标
y: 10 , //元素的新y坐标
opacity: .8， //元素的新不透明度
easing: 'easeOut', duration: .5 }); //以上属性width、height、x、y、opacity至少必须有一项
10.ghost：当元素渐隐时，元素同时滑出。可通过第1个参数设置滑出位置。其使用方法请看下面代码。
var el = Ext.get('elId');
el.ghost();
//自定义方式，从左边滑出
el.ghost('l'，{ easing: 'easeOut', duration: .5, remove:false, userDisplay:fase });
11.animate：通过该方法可自定义复杂的动画效果。其使用方法请看下面代码。
var el = Ext.get('elId');
el.animate( { borderWith:{to : 3,from:0},
opacity: {to: .5, from:1}
height: {to 100 , from:el.getHeight()},
widht: {to 200 , from:el.getwidth()},
top:{by:-100,unit: 'px'} },
1,//动画长度，单位为秒，该参数可选
null, //回调函数，该参数可选
'easeOut',//渐变方式，该参数可选
'run' //动画类型 );
在定义中，borderWidth、opactiy等属性可以为元素的任何样式属性。动画类型包括以下几个类型：
run：默认类型。
color：动画渐变背景、文本或边界颜色。
motion：在渐变过程中使用Bezier曲线作为运动轨迹。
scroll：已垂直或水平滚动方式运动。
2系统分区编辑
它是专门为Linux设计的，拥有最快的速度和最小的CPU占用率。
Linux作为自由软件，赢得了许多用户，其磁盘分区格式一种是Linux Native主分区，另一种是Linux Swap交换分区，并且主分区和交换分区都采用同一种格式，既Native和Swap格式。
这两种分区格式的安全和稳定性相当好，使用Linux操作系统死机的机会将大大减少。但是，目前支持这类分区格式的操作系统也有Linux和Android。
Grid的分页必须依靠服务端（Server Side）来划分好每一页的数据才可以完成。
Grid组件：
Ext.data.Store 为Grid提供数据源，可以来自Record对象也可以是一个通过Ext.
data.XmlReader读取的XML流，这些数据可能由HttpProxy、DataProxy、MemoryProxy或ScriptTagProxy提供
Ext.grid.GridPanel或Ext.grid.EditorGridPanel 为网格布局、组装提供的容器对象，这个对象是一个网格的核心
Ext.grid.ColumnModel 定义网格的列属性，俗语表头，表体会由Ext.data.Store提供，完成填充。如果你打算为每行提供一个行号，在创建Model时，加入new Ext.grid.RowNumberer()配置即可
如果你计划为可编辑的表格提供新增行操作，建议定义出一个Ext.data.Record的Plant，并在创建Store时与之绑定，这样你就可以使用Store的insert方法，动态创建一个Plant了（一行新记录）。
可以说Ext的Grid已经对各种场景的操作进行了足够封装，基本能够满足复杂场合下的表格应用
Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。
首先，一个表格应该有列定义，即定义表头ColumnModel：
// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
{header:'编号', dataIndex:'id'},
{header:'性别', dataIndex:'sex'},
{header:'名称', dataIndex:'name'},
{header:'描述', dataIndex:'descn'}
]);
cm.defaultSortable = true;
该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：
{header:'编号',dataIndex:'id',Sortable:true},
现在就来看看这个Ext.data.Store是如何转换三种数据的。
1.二维数组：
// ArrayData
var data = [
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','male','name3','descn3'],
['4','male','name4','descn4'],
['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
])
});
ds.load();
ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。
现在用的是Ext.data.MemoryProxy，它将内存中的数据data作为参数传递。Ext.data.ArrayReader专门用来解析数组，并且告诉我们它会按照定义的规范进行解析，每行按顺序读取四个数据，第一个叫id，第二个叫sex，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。
mapping属性用于标记data中的读取后的数据与标头的映射关系，一般是不用设置的。但如果我们想让sex的数据中name栏中出现，可以设置mapping值。即id的mapping为2,后者为0。
记得要执行一次ds.load()，对数据进行初始化。
数据的显示显得非常简单：
HTML文件：
JS文件：
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();
2.如何在表格中添加CheckBox呢？
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自动行号
sm,//添加的地方
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,//添加的地方
title: 'HelloWorld'
});
3. 如何做Grid上触发事件呢？
下面是一个cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}
4.如何做Grid中做出快捷菜单效果：
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素
items: [
{
id: 'rMenu1',
handler: rMenu1Fn,//点击后触发的事件
text: '右键菜单1'
},
{
//id: 'rMenu2',
//handler: rMenu2Fn,
text: '右键菜单2'
}
]
});
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick');
}
5.如何将一列中的数据根据要求进行改变呢？
比如说性别字段根据其male或female改变显示的颜色，这种ColumnMode中设计：
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:changeSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
function changeSex(value){
if (value == 'male') {
return "红男";
} else {
return "绿女";
}
}
其它两种数据的Grid显示是相同的，其不同之处在于数据获取的过程
6.Json数据
至于这种数据的类型请大家自己看Ajax的书籍：
//JsonData
var data = {
'coders': [
{ 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': '[email protected]' },
{ 'id': '2', 'sex': 'male','name':'Hunter', 'descn': '[email protected]' },
{ 'id': '3', 'sex': 'female','name':'Harold', 'descn': '[email protected]' },
{ 'id': '4', 'sex': 'male','name':'Harolds', 'descn': '[email protected]' }
],
'musicians': [
{ 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
{ 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.JsonReader({root: 'coders'}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
autoHeight: true//一定要写，否则显示的数据会少一行
});
grid.render();
7.使用XML数据：
注意，读取XML数据必须在服务器上进行。
XML数据test.xml的内容：
var ds3 = new Ext.data.Store({
url: 'test.xml', //XML数据
reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
8.从服务器获取数据和数据翻页控件
从一个服务器文件，如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据，也可以被Ext读取，并被Grid显示：
服务器文件data.asp:
<%
start = cint(request("start"))
limit = cint(request("limit"))
dim json
json=cstr("{totalProperty:100,root:[")
for i = start to limit + start-1
json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
if i <> limit + start - 1 then
json =json + ","
end if
next
json = json +"]}"
response.write(json)
%>
我们可以看到，这个页面会根据传入的start和limit的不同，返回不同的数据，其实质是个分页的代码。下面是start=0,limit=10的JSON数据：
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}
我们使用分页控件来控制Grid的数据：
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'data.asp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load({params:{start:0,limit:10}});
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'ASP->JSON',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
}),
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
grid.render();
})
10.如何在Grid的上方添加按钮呢？
添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条：
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
tbar: new Ext.Toolbar({
items:[
{
id:'buttonA'
,text:"Button A"
,handler: function(){ alert("You clicked Button A"); }
}
,
new Ext.Toolbar.SplitButton({})
,{
id:'buttonB'
,text:"Button B"
,handler: function(){ alert("You clicked Button B"); }
}
,
'-'
,{
id:'buttonc'
,text:"Button c"
}
]
})
});
11.将GridPanel放入一个Panel或TabPanel中
var tabs = new Ext.TabPanel({
collapsible: true
,renderTo: 'product-exceptions'
,width: 450
,height:400
,activeTab: 0
,items:[
{
title: 'Unmatched'
},{
title: 'Matched'
}
]
});
tabs.doLayout();
var panel = new Ext.Panel({
renderTo: 'panel',
title:'panel',
collapsible:true,
width:450,
height:400,
items:[grid] //管理grid
});
Panel必须有DIV存在。其包含的Component有items管理。