参?http://extjs.com/learn/Tutorial:Introduction_to_Ext
?记录一下ExtJS的一些简单用的Ҏ.备忘...
开?..
在ExtJS里最常用?应该是Ext.onReadyq个Ҏ?而且它也可能是你学习ExtJS所接触的第一个方?q个Ҏ在当前的DOM加蝲完毕后自动调?保证面内的所有元素都能被Script所引用.可以试在这个方法中d一条语?看看面打开后是什么反?
Ext.onReady(function() {
alert('hello world!');
});
上面的代码将在页面加载完毕后弹出一对话?打印?hello world!'字样.
获取元素
q有一个常用的Ҏ,是获取面上的元素?ExtJS提供了一个getҎ,可以ҎID取到面上的元素:
var myDiv = Ext.get('myDiv');
会取到页面上ID?myDiv'的元?如果使用Element.dom的方?则可以直接操作底层的DOM节点,Ext.getq回的则是一个Element对象.
在不能用这U方式来获取多个DOM的节?或是要获取一些ID不一?但又有相同特征的时?可以通过选择器来q行获取,比如要获取页面上所有的<p>标签,则可以?
var ps = Ext.select('p');
q样你就可以Ҏ要获取的元素q行操作?select()Ҏq回的是Ext.CompositeElement对象,可以通过其中的each()Ҏ对其所包含的节点进行遍?
ps.each(function(el) {
el.highlight();
});
当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象??
ps.highlight();
或是:
Ext.select('p').highlight();
当然,select参数q可以更复杂一?其中可以包括W3C Css3Dom选取?基本的XPath,HTML属性等,详细情况,可以查看DomQuery API的文?来了解细?
事g响应
获取C元素,则可能会对一些元素的事gq行一些处?比如获取一个按?我们为它d一个单M件的响应:
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert('You clicked the button!');
});
});
当然,你可以把事g的响应加到通过select()Ҏ获取到的元素?
Ext.select('p').on('click', function() {
alert('You clicked a paragraph!');
});
Widgets
ExtJSq提供了丰富的UI库来供大家?
消息H口
前面的alert()Ҏ替换一UExtJS提供的方?
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert('You clicked the button!');
});
});
而且它还可以如桌面开发一?来设|消息窗口是否模式的,也就是说在弹出窗口的时?其他的操作是否可?q点我很喜欢...^_^
q有非常好用的Grid,Tree,Menu{等,q些E后会有更加详细的介l?
Ajax部分也提供了不错的支?E后都会有详l的介绍....
马上׃班了,今天暂时写到这里吧.
前面已经把列?分页,删除{部分说完了,q里再把创徏和修改说?基本的功能就差不多了.
创徏
在这?创徏和修改者是用Dialog的Ş式来做的,首先则需要创建相应的DIV:
<!-- add div -->
<div id="a-addInstance-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">d权限</div>
<div class="x-dlg-bd">
<div id="a-addInstance-inner" class="x-layout-inactive-content">
<div id="a-addInstance-form"></div>
</div>
</div>
</div>
之后是在这个DIV里创建Form?直接用Ext的Formlg:
createNewForm : function() {
this.name_tf = new Ext.form.TextField({
fieldLabel : '名称',
name : 'name',
allowBlank : false
});
this.description_tf = new Ext.form.TextField({
fieldLabel : '描述',
name : 'description'
});
this.addForm = new Ext.form.Form({
labelAlign : 'right',
url : '/wit/add.shtml'
});
this.addForm.column({
width : 430,
labelWidth : 120,
style : 'margin-left : 8px; margin-top : 8px;'
});
this.addForm.fieldset(
{id : 'desc', legend : '请填写字D?},
Grid.name_tf,
Grid.description_tf
);
this.addForm.applyIfToFields({ width : 255 });
this.addForm.render('a-addInstance-form');
this.addForm.end();
}
之后别忘了在加蝲的时候调用这个方?
this.createNewForm();
FormH体定义?现在可以处理前面说的q那个创建按钮的事g?在这里事件处理的Ҏ名ؓdoAdd:
doAdd : function() {
if (!Grid.addInstanceDlg) {
Grid.addInstanceDlg = Grid.createNewDialog('a-addInstance-dlg');
Grid.addInstanceDlg.addButton('重置', Grid.resetForm, Grid.addInstanceDlg);
Grid.addInstanceDlg.addButton('保存', Grid.saveNewForm, Grid.addInstanceDlg);
var layout = Grid.addInstanceDlg.getLayout();
layout.beginUpdate();
var t = new Ext.ContentPanel('a-addInstance-inner', {title : 'create account'});
layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title : 'd权限'}));
layout.endUpdate();
}
Grid.addInstanceDlg.show();
}
首先用Grid.createNewDialog创徏一个LayoutDialog,之后再把d里的Ҏ的按钮加上去,然后更新一下Dialog的布局,把它昄出来,q时可以看到添加的H体?
?H体做的很难?因ؓ只是Z实现功能,没有在这方便下什么功?
Grid.createNewDialog用于创徏和修Ҏ创徏对话?代码如下:
createNewDialog : function(title) {
var newDialog = new Ext.LayoutDialog(title, {
modal : true,
autoTabs : true,
proxyDrag : true,
resizable : false,
width : 480,
height : 302,
shadow : true,
center : {
autoScroll : true,
tabPosition : 'top',
closeOnTab : true,
closeOnTab : true,
alwaysShowTabs : false
}
});
newDialog.addKeyListener(27, newDialog.hide, newDialog);
newDialog.addButton('取消', function() { newDialog.hide(); } );
return newDialog;
}
如果d成功,则自动关闭这个Dialog,q新加载列?如果dp|,只是单的弹出一个对话框,提示p|,其实q里可以做的更h性化一?可以在服务器端传回错误的原因,比如某字D|问题,可以U色昄出其输入框等{?q里服务端返回的JSON数据与删除返回的一?
处理代码如下:
saveNewForm : function() {
if (Grid.addForm.isValid()) {
Grid.addForm.submit({
waitMsg : '正在保存数据...',
reset : true,
failure : function(form, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
success : function(form, action) {
Grid.addInstanceDlg.hide();
Grid.ds.reload();
}
});
} else {
Ext.MessageBox.alert('错误', '字段填写不正?');
Grid.name_tf.focus();
}
}
修改
修改则和创徏差不多了,不同的有两点,一是事件是在列表的行上双击,来触发事?弹出修改对话?另一个则是需要在昄对话框的同时,把所要修改的记录的数据加载进?
首先在列表加上事件捕?
this.grid.on('rowdblclick', this.onRowDbClick, this);
下面则是处理q个事g的代?
onRowDbClick : function(grid, rowIndex, e) {
var selectId = this.ds.data.items[rowIndex].id;
var roleData = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : '/wit/edit.shtml?id=' + selectId}),
reader : new Ext.data.JsonReader({}, ['id', 'name', 'description']),
remoteSort : false
});
roleData.on('load', function() {
Grid.updateId = roleData.getAt(0).data['id'];
Grid.name_show.setValue(roleData.getAt(0).data['name']);
Grid.description_show.setValue(roleData.getAt(0).data['description']);
if (!Grid.updateInstanceDlg) {
Grid.updateInstanceDlg = Grid.createNewDialog('a-updateInstance-dlg');
Grid.updateInstanceDlg.addButton('保存', Grid.saveUpdateForm, Grid.updateInstanceDlg);
var layout = Grid.updateInstanceDlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('a-updateInstance-inner', {title : '修改权限'}));
layout.endUpdate();
}
Grid.updateInstanceDlg.show();
});
roleData.load();
}
q里做了两g?一个是把欲修改的数据加载到本地, 服务端返回的数据l构?
([{"id":"12","description":"test role 12","name":"puras 12"}])
一个是数据置入FormH体的字D中,q将Dialog昄出来.修改的Form与创建的怼:
createEditForm : function() {
this.name_show = new Ext.form.TextField({
fieldLabel : '名称',
name : 'name',
allowBlank : false
});
this.description_show = new Ext.form.TextField({
fieldLabel : '名称',
name : 'description'
});
this.editForm = new Ext.form.Form({
labelAlign : 'right',
url : '/wit/edit_ok.shtml'
});
this.editForm.column({width : 430, labelWidth : 120, style : 'margin-left : 8px; margin-top : 8px;'});
this.editForm.fieldset(
{legend : 'h新字D?},
Grid.name_show,
Grid.description_show
);
this.editForm.applyIfToFields({width : 255});
this.editForm.render('a-updateInstance-form');
this.editForm.end();
}
q个Form对应的Div?
<!-- update div -->
<div id="a-updateInstance-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">修改权限</div>
<div class="x-dlg-bd">
<div id="a-updateInstance-inner" class="x-layout-inactive-content">
<div id="a-updateInstance-form"></div>
</div>
</div>
</div>
双击某条记录,则会弹出修改Dialog?大概的样子如?
修改的处理事件与dcM,需要注意的地方是ID是怎么传过ȝ:
saveUpdateForm : function() {
if (Grid.editForm.isValid()) {
Grid.editForm.submit({
params : { id : Grid.updateId},
waitMsg : '正在更新数据...',
reset : false,
failure : function(form, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
success : function(form, action) {
Grid.updateInstanceDlg.hide();
Grid.ds.reload();
}
});
} else {
Ext.MessageBox.alert('错误', '字段填写不正?');
}
}
到此Over?列表,??攚wOK?在没有做的时?L感觉找不到入口点,做完之后才发?原来自己担心的问?都不是问??x,q是挺简单的.
作?puras
{于现在|上多数的Form的例子都多数是描q前台UI?而没有对与服务端通讯的部?故参考EXTJS的一个指?写下此文,希望能对大家有所帮助.
在WEB应用?大部分的面都可以被分ؓ:列表,创徏,d,更新,删除.在Ext的文中心提供了一个非常好的例?一个行内编辑的表格.然?在现实中,行内~辑的表格是q远不够?q需要用不同的方式来展示表单.下面的例子中向你展示如何在表g创徏/更新一个对话框表单.
列表功能
首先是是一个权限列表页,它包含分?查询/qo功能,创徏和删除功?
先定义数据源:
this.ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({ url : '/wit/data.shtml' }), //'/wit/data.shtml' 一个读取数据列表的Action
reader : new Ext.data.JsonReader({ //使用JSON传输入数?br> root : 'roleList',
totalProperty : 'totalCount',
id : 'id'
},
// 定义字段映射
[
{
name : 'id',
mapping : 'id',
type : 'string'
},
{
name : 'name',
mapping : 'name',
type : 'string'
},
{
name : 'description',
mapping : 'description',
type : 'string'
},
{
name : 'createDate',
mapping : 'createDate',
type : 'string'
},
{
name : 'updateDate',
mapping : 'updateDate',
type : 'string'
}
]),
remoteSort : true
});
this.ds.load({ params:{ start : 0, limit : 20 } });
指定数据的来源位|?解析的方?以及字段的映?
接下来是表格中表头的定义,匚w上面的字D?
this.cm = new Ext.grid.ColumnModel([
{
header : '#',
dataIndex : 'id',
width : 30,
sortable : 1
},
{
header : '名称',
dataIndex : 'name',
width : 140,
sortable : 1
},
{
header : '描述',
dataIndex : 'description',
width : 140,
sortable : 1
},
{
header : '创徏日期',
dataIndex : 'createDate',
width : 150,
sortable : 1
},
{
header : '修改日期',
dataIndex : 'updateDate',
width : 150,
sortable : 1
}
]);
再定义一下Grid:
this.grid = new Ext.grid.Grid('htmlGridPanel', {
ds : Grid.ds,
cm : Grid.cm,
enableColLock : false,
autoSizeColumns : true,
loadMask : true
});
this.grid.render();
现在,可以看到简单的表格?功能q有待完?
接下?在表格的头部面板?dqo/查询的下拉菜?
this.gridHead = this.grid.getView().getHeaderPanel(true);
this.toolbar = new Ext.Toolbar(this.gridHead);
this.filterBtn = new Ext.Toolbar.MenuButton({
icon : '../images/class.gif',
cls : 'x-btn-text-icon',
text : '选择qo?,
tooltip : '选择一个过滤器',
menu : { items : [
new Ext.menu.CheckItem({ text : '~号', value : 'id', checked : true, group : 'filter', checkHandler : this.onItemCheck}),
new Ext.menu.CheckItem({ text : '名称', value : 'name', checked : false, group : 'filter', checkHandler : this.onItemCheck}),
new Ext.menu.CheckItem({ text : '描述', value : 'description', checked : false, group : 'filter', checkHandler : this.onItemCheck})
]},
minWidth : 105
});
this.toolbar.add(this.filterBtn);
this.filter = Ext.get(this.toolbar.addDom({
tag : 'input',
type : 'text',
size : '30',
value : '',
style : 'background : #F0F0F9;'
}).el);
this.filter.on('keypress', function(e) {
if (e.getKey() == e.ENTER && this.getValue().length > 0) {
Grid.ds.load({ params : { start : 0, limit : 20 }});
}
});
在表格的底部面板d分页,d,删除按钮:
this.gridFoot = this.grid.getView().getFooterPanel(true);
this.paging = new Ext.PagingToolbar(this.gridFoot, this.ds, {
pageSize : 20,
displayInfo : true,
displayMsg : '共有 {2} 条记?当前昄 {0} - {1}条记?',
emptyMsg : '没有记录!'
});
this.paging.add('-', {
pressed : true,
enableToggle : true,
text : 'd',
cls : '',
toggleHandler : this.doAdd
});
this.paging.add('-', {
pressed : true,
enableToggle : true,
text : '删除',
cls : '',
toggleHandler : this.doDel
});
在分中,你需要在从服务器端加载数据之前发送过滤的字段和?
this.ds.on('beforeload', function() {
Grid.ds.baseParams = {
filterValue : Grid.filter.getValue(),
filterTxt : Grid.filterBtn.getText()
};
});
从服务器端返回的列表的JSONl果如下:
{"roleList":[{"id":21,"description":"description21","name":"puras21","createDate":"Fri Sep 07 15:54:44 CST 2007","updateDate":"Fri Sep 07 15:54:44 CST 2007"},{"id":40,"description":"description40","name":"puras40","createDate":"Fri Sep 07 15:54:44 CST 2007","updateDate":"Fri Sep 07 15:54:44 CST 2007"}],"totalCount":2}
删除
删除Ҏ如下:
doDel : function() {
var c = Grid.grid.getSelections();
if (c.length > 0)
Ext.MessageBox.confirm('消息', '认要删除所选记?', Grid.doDelProc);
else
Ext.MessageBox.alert('警告', '最需要选择一条记?');
},
doDelProc : function(btn) {
if (btn == 'yes') {
if (Grid.grid.getSelectionModel().hasSelection()) {
var ids = new Array();
var records = Grid.grid.getSelectionModel().getSelections();
for (var i = 0, len = records.length; i < len; i++) {
ids[ids.length] = records[i].id;
}
Ext.lib.Ajax.request(
'GET',
'/wit/delete.shtml?ids=' + ids,
{
success : Grid.onSuccess,
failure : function(form, action) { Ext.MessageBox.alert('消息', '删除p|!');}
},
null
);
}
}
},
onSuccess : function(o) {
var response = function(json) {
try {
return eval('(' + json + ')');
} catch(e) {}
return null;
}(o.responseText);
if (response.failure && response.failure == true) {
Ext.MessageBox.alert('消息', response.info);
}
Grid.ds.reload();
}
通过Ajax的Ş式提交到服务器端.如果删除p|,则将p|信息昄l用?onSuccess可以用于??改三个功能的处理.q回的JSON数据l构如下:
"{success : true, info : '删除成功!'}"
未完待箋......