ExtJS 示例
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
我们结合 ExtJS 官方的一个教程来示例:
//当DOM加载就绪时执行
Ext.onReady(function(){
//将一个匿名函数赋值给一个变量
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();
//新建一个MessageBox,并显示
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
}
//为所有的p元素绑定click事件的响应函数
Ext.select('p').on('click', paragraphClicked);
});
短短的不到 20 行代码,就可以为页面上的每个端楼添加事件处理器,当点击每个段落时,都会弹出一个消息框,消息框的内容为段落的内容。而且这个消息框的 UI 非常漂亮,可以四处移动,并且确实浮在页面的上层:
图 ExtJS 消息框示例
ExtJS 中封装了大量的 UI 组件,使得开发 RIA(富客户端应用)非常方便,较常见的有 Tree, Grid,我们来看看 Grid 组件的使用:
Ext.onReady(function(){
//定义数据源,在应用中可能来自服务器端
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
//定义reader,指定为ArrayReader,用于格式化
var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
//创建Ext.grid.GridPanel
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: "Company", width: 120,
sortable: true, dataIndex: 'company'},
{header: "Price", width: 90,
sortable: true, dataIndex: 'price'},
{header: "Change", width: 90,
sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90,
sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'grid',
title: 'My First Grid',
width: 500,
height: 250,
frame: true
});
//指定选择模式,选中第一行
grid.getSelectionModel().selectFirstRow();
});
同样,通过寥寥数行代码,定义了数据源及数据源的格式之后,很容易就可以构建出非常漂亮且标准的 Grid 来:
图 ExtJS Grid 示例 这个 Grid 中,包括了列的排序支持(正序/逆序),对需要显式的列的过滤等等,通过使用 ExtJS,可以大大提高 B/S 架构下页面 UI 开发的效率。
在线练习
{$ activeFileHint $}