闲了将近二十天,一直在学习Extjs,昨天接到通知,下周将进入新的项目组培训,培训内容是Flex。
在学Extjs的时候,见过别人对Extjs和Flex的比较。记得当时有人说Extjs和Flex根本不是一个层次上的框架,但那时我依然连Flex是什么都没有去查,而毅然的选择了Extjs。但可笑的是,下一个项目的应用就是Flex。
由于项目的紧张,也许对Extjs的学习将要告一段落了。所以,我该写点什么。
用Extjs做登录
index.html
login.js
Extjs是与后台对立的框架,所以后台的处理用什么是随意的,只要能够返回前台可以识别的数据即可。
用Extjs做布局
js代码片段:
用事件来触发centerPanel中添加一个装有GridPanel的Tab,显示新闻列表,TabPanel中添加一个按钮实现添加新闻。
以上是一些代码片断,前几天在研究desktop,想实现成动态的页面,代码还没写完。
暂时放下Extjs一些日子,明天开始学习Flex,既然都是客户端框架,应该多少有些共通之处吧。谁知道呢,学学看吧。
本文链接:http://www.blogjava.net/realsmy/archive/2008/01/12/174791.html
在学Extjs的时候,见过别人对Extjs和Flex的比较。记得当时有人说Extjs和Flex根本不是一个层次上的框架,但那时我依然连Flex是什么都没有去查,而毅然的选择了Extjs。但可笑的是,下一个项目的应用就是Flex。
由于项目的紧张,也许对Extjs的学习将要告一段落了。所以,我该写点什么。
用Extjs做登录
index.html
<!----><div id="north-div"><a id="login" href="#">Login</a></div>
login.js
<!---->Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif'; //替换默认的空白图片
Ext.QuickTips.init(); // 初始化鼠标停留时的显示框,这里用不上
// 点击登录时触发的事件
onClickLogin = function() {
var loginUrl = '../../login.do'; // 登录请求的url
// 这里Login的Panel分为两部分,logoPanel和formPanel
// 创建logoPanel对象
var logoPanel = new Ext.Panel( {
baseCls : 'x-plain',
html : 'Here is your logo'
});
// 创建formPanel对象
var formPanel = new Ext.form.FormPanel( {
bodyStyle : 'padding:35px 25px 0',
baseCls : 'x-plain',
defaults : {
width : 200
},
defaultType : 'textfield',
frame : false,
id : 'login-form',
// form面板上的组件
items : [ {
fieldLabel : 'User Name',
name : 'name'
}, {
fieldLabel : 'Password',
inputType : 'password',
name : 'password'
}],
labelWidth : 120,
region : 'center',
url : loginUrl
});
// 创建window对象,用来装置以上两个面板,使login显示在一个window上
var win = new Ext.Window( {
// window上的按钮,按钮时独立的,也可以设置在formPanel里
buttons : [ {
handler : function() { // 按钮login触发的事件
form.submit( {
waitMsg : 'Please Wait',
reset : true,
success : this.Success, // 登录成功的时候执行
fail : this.Fail, // 登录失败的时候执行
scope : onClickLogin // 这里是为了指定this的范围
});
},
scope : onClickLogin,
text : 'LOGIN'
}, {
handler : function() { // 按钮cancel触发的事件
win.hide();
},
scope : onClickLogin,
text : 'CANCEL'
}],
buttonAlign : 'right',
closable : false,
draggable : true,
height : 200,
id : 'login-win',
layout : 'border',
plain : true,
// window上的组件
items : [logoPanel, formPanel],
title : 'Login',
width : 400
});
// 取得表单,参考login按钮触发的事件
form = formPanel.getForm();
// 显示window
win.show();
// return里的为onClickLogin的共有函数
return {
Success : function(f, a) {
if (a && a.result) { //a表示action,a.result表示action返回的结果数据
win.destroy(true);
// setCookie
// set window.location
}
},
Fail : function(f, a) {
Ext.Msg.alert('Login failed');
}
};
};
// 设置login事件
Ext.get('login').on('click', onClickLogin);
});
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif'; //替换默认的空白图片
Ext.QuickTips.init(); // 初始化鼠标停留时的显示框,这里用不上
// 点击登录时触发的事件
onClickLogin = function() {
var loginUrl = '../../login.do'; // 登录请求的url
// 这里Login的Panel分为两部分,logoPanel和formPanel
// 创建logoPanel对象
var logoPanel = new Ext.Panel( {
baseCls : 'x-plain',
html : 'Here is your logo'
});
// 创建formPanel对象
var formPanel = new Ext.form.FormPanel( {
bodyStyle : 'padding:35px 25px 0',
baseCls : 'x-plain',
defaults : {
width : 200
},
defaultType : 'textfield',
frame : false,
id : 'login-form',
// form面板上的组件
items : [ {
fieldLabel : 'User Name',
name : 'name'
}, {
fieldLabel : 'Password',
inputType : 'password',
name : 'password'
}],
labelWidth : 120,
region : 'center',
url : loginUrl
});
// 创建window对象,用来装置以上两个面板,使login显示在一个window上
var win = new Ext.Window( {
// window上的按钮,按钮时独立的,也可以设置在formPanel里
buttons : [ {
handler : function() { // 按钮login触发的事件
form.submit( {
waitMsg : 'Please Wait',
reset : true,
success : this.Success, // 登录成功的时候执行
fail : this.Fail, // 登录失败的时候执行
scope : onClickLogin // 这里是为了指定this的范围
});
},
scope : onClickLogin,
text : 'LOGIN'
}, {
handler : function() { // 按钮cancel触发的事件
win.hide();
},
scope : onClickLogin,
text : 'CANCEL'
}],
buttonAlign : 'right',
closable : false,
draggable : true,
height : 200,
id : 'login-win',
layout : 'border',
plain : true,
// window上的组件
items : [logoPanel, formPanel],
title : 'Login',
width : 400
});
// 取得表单,参考login按钮触发的事件
form = formPanel.getForm();
// 显示window
win.show();
// return里的为onClickLogin的共有函数
return {
Success : function(f, a) {
if (a && a.result) { //a表示action,a.result表示action返回的结果数据
win.destroy(true);
// setCookie
// set window.location
}
},
Fail : function(f, a) {
Ext.Msg.alert('Login failed');
}
};
};
// 设置login事件
Ext.get('login').on('click', onClickLogin);
});
Extjs是与后台对立的框架,所以后台的处理用什么是随意的,只要能够返回前台可以识别的数据即可。
用Extjs做布局
js代码片段:
<!---->Ext.contants = {};
Ext.contants.links = '<a id="link1" href="#">Link1</a><br><a id="link2" href="#">Link2</a>'
// 创建一个TabPanel作为中间的面板
var centerPanel = new Ext.TabPanel( {
region : 'center',
contentEl : 'center-div',
split : true,
border : true,
resizeTabs : true,
minTabWidth : 115,
tabWidth : 135,
enableTabScroll : true,
defaults : {
autoScroll : true
},
plugins : new Ext.ux.TabCloseMenu()
});
// 用Viewport来实现布局
var viewport = new Ext.Viewport( {
layout : 'border',
// items中包含东西南北中五个组件
items : [ {
// 我将北部设计为全局导航,比如可以把login的按钮放在这里
title : 'Welcome to come China',
region : 'north',
contentEl : 'north-div',
split : true,
border : true,
collapsible : true,
height : 50,
minSize : 50,
maxSize : 120
}, {
// 空面板
region : 'south',
contentEl : 'south-div',
split : true,
border : true,
collapsible : true,
height : 50,
minSize : 50,
maxSize : 120
}, {
// 空面板
region : 'east',
contentEl : 'east-div',
split : true,
border : true,
collapsible : true,
width : 120,
minSize : 120,
maxSize : 200
}, {
// Links面板
title : 'Links',
region : 'west',
contentEl : 'west-div',
split : true,
border : true,
collapsible : true,
width : 150,
minSize : 120,
maxSize : 200,
layout : 'accordion',
layoutConfig : {
animate : true
},
// 面板中包含几个组件
items : [ {
// 以其中一个为例,这里面有两个links
html : Ext.contants.links,
title : 'Links',
autoScroll : true,
border : false,
iconCls : 'nav'
}, {
title : 'aaa',
html : 'aaa',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'bbb',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'ccc',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bb',
html : 'ddd',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'eee',
border : false,
autoScroll : true,
iconCls : 'settings'
}]
}, centerPanel] //最后一个是中间的TabPanel
});
Ext.contants.links = '<a id="link1" href="#">Link1</a><br><a id="link2" href="#">Link2</a>'
// 创建一个TabPanel作为中间的面板
var centerPanel = new Ext.TabPanel( {
region : 'center',
contentEl : 'center-div',
split : true,
border : true,
resizeTabs : true,
minTabWidth : 115,
tabWidth : 135,
enableTabScroll : true,
defaults : {
autoScroll : true
},
plugins : new Ext.ux.TabCloseMenu()
});
// 用Viewport来实现布局
var viewport = new Ext.Viewport( {
layout : 'border',
// items中包含东西南北中五个组件
items : [ {
// 我将北部设计为全局导航,比如可以把login的按钮放在这里
title : 'Welcome to come China',
region : 'north',
contentEl : 'north-div',
split : true,
border : true,
collapsible : true,
height : 50,
minSize : 50,
maxSize : 120
}, {
// 空面板
region : 'south',
contentEl : 'south-div',
split : true,
border : true,
collapsible : true,
height : 50,
minSize : 50,
maxSize : 120
}, {
// 空面板
region : 'east',
contentEl : 'east-div',
split : true,
border : true,
collapsible : true,
width : 120,
minSize : 120,
maxSize : 200
}, {
// Links面板
title : 'Links',
region : 'west',
contentEl : 'west-div',
split : true,
border : true,
collapsible : true,
width : 150,
minSize : 120,
maxSize : 200,
layout : 'accordion',
layoutConfig : {
animate : true
},
// 面板中包含几个组件
items : [ {
// 以其中一个为例,这里面有两个links
html : Ext.contants.links,
title : 'Links',
autoScroll : true,
border : false,
iconCls : 'nav'
}, {
title : 'aaa',
html : 'aaa',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'bbb',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'ccc',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bb',
html : 'ddd',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'eee',
border : false,
autoScroll : true,
iconCls : 'settings'
}]
}, centerPanel] //最后一个是中间的TabPanel
});
用事件来触发centerPanel中添加一个装有GridPanel的Tab,显示新闻列表,TabPanel中添加一个按钮实现添加新闻。
<!---->var zhaiiGrid;
// 在TabPanel中的Add按钮触发的事件,用来添加一条新信息
var addZhaii = function() {
var formPanel, win;
if (!formPanel) {
formPanel = new Ext.form.FormPanel( {
baseCls : 'x-plain',
defaults : {
width : 200
},
defaultType : 'textfield',
frame : false,
id : 'addZhaii-form',
items : [ {
fieldLabel : 'Title',
name : 'title'
}, {
fieldLabel : 'Contents',
xtype : 'htmleditor',
anchor : '95%',
allowBlank : false,
height : 200,
name : 'contents'
}],
labelWidth : 80,
region : 'center',
url : 'addZhaii.do'
});
}
if (!win) {
win = new Ext.Window( {
buttons : [ {
handler : function() {
form.submit( {
waitMsg : 'Please Wait',
reset : true,
// success : Login.Success,
scope : addZhaii
});
},
scope : addZhaii,
text : 'Add'
}, {
handler : function() {
win.hide();
},
scope : addZhaii,
text : 'Cancel'
}],
buttonAlign : 'right',
closable : false,
draggable : true,
height : 300,
id : 'addZhaii-win',
layout : 'border',
minHeight : 250,
minWidth : 530,
plain : true,
resizable : true,
items : [formPanel],
title : 'Link1 Window',
width : 650
});
}
form = formPanel.getForm();
win.show();
};
var addZhaiiAction = new Ext.Action( {
text : 'Add Zhaii',
handler : addZhaii, // 触发上面定义的添加事件
iconCls : 'blist'
});
var addZhaiiTab = function() {
var expander = new Ext.grid.RowExpander( {
tpl : new Ext.Template('<p><b>Title:</b> {title}<br>',
'<p><b>Contents:</b> {contents}</p>')
});
var cm = new Ext.grid.ColumnModel([expander, {
header : 'id',
dataIndex : 'id'
}, {
header : 'title',
width : 300,
dataIndex : 'title'
}, {
header : 'zhaier',
dataIndex : 'zhaier'
}, {
header : 'date',
dataIndex : 'date'
}, {
header : 'sc',
dataIndex : 'sc'
}, {
header : 'hh',
dataIndex : 'hh'
}]);
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '../../getZhaii.do'
}),
reader : new Ext.data.JsonReader( {
totalProperty : 'totalProperty',
root : 'root'
}, [ {
name : 'content'
}, {
name : 'hh'
}, {
name : 'sc'
}, {
name : 'date'
}, {
name : 'zhaier'
}, {
name : 'title'
}, {
name : 'id'
}])
});
ds.load( {
params : {
start : 0,
limit : 10
}
});
if (Ext.isEmpty(zhaiiGrid)) {
zhaiiGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'zhaiiGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'zhaiiGrid',
iconCls : 'icon-grid',
closable : true,
// top处添加事件按钮
tbar : [addZhaiiAction],
// bottom处的分页栏
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: '没有记录'
})
});
// .show()了才会显示
centerPanel.add(zhaiiGrid).show();
} else if (zhaiiGrid = centerPanel.getItem('zhaiiGrid')) {
// zhaiiGrid.show();
} else {
zhaiiGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'zhaiiGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'adsfasd',
iconCls : 'icon-grid',
closable : true,
tbar : [addZhaiiAction],
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: '没有记录'
})
});
centerPanel.add(zhaiiGrid).show();
}
}
// 给link1添加事件
Ext.get('link1').on('click', addZhaiiTab);
// 初始化页面时,便添加zhaiiTab
addZhaiiTab();
// 在TabPanel中的Add按钮触发的事件,用来添加一条新信息
var addZhaii = function() {
var formPanel, win;
if (!formPanel) {
formPanel = new Ext.form.FormPanel( {
baseCls : 'x-plain',
defaults : {
width : 200
},
defaultType : 'textfield',
frame : false,
id : 'addZhaii-form',
items : [ {
fieldLabel : 'Title',
name : 'title'
}, {
fieldLabel : 'Contents',
xtype : 'htmleditor',
anchor : '95%',
allowBlank : false,
height : 200,
name : 'contents'
}],
labelWidth : 80,
region : 'center',
url : 'addZhaii.do'
});
}
if (!win) {
win = new Ext.Window( {
buttons : [ {
handler : function() {
form.submit( {
waitMsg : 'Please Wait',
reset : true,
// success : Login.Success,
scope : addZhaii
});
},
scope : addZhaii,
text : 'Add'
}, {
handler : function() {
win.hide();
},
scope : addZhaii,
text : 'Cancel'
}],
buttonAlign : 'right',
closable : false,
draggable : true,
height : 300,
id : 'addZhaii-win',
layout : 'border',
minHeight : 250,
minWidth : 530,
plain : true,
resizable : true,
items : [formPanel],
title : 'Link1 Window',
width : 650
});
}
form = formPanel.getForm();
win.show();
};
var addZhaiiAction = new Ext.Action( {
text : 'Add Zhaii',
handler : addZhaii, // 触发上面定义的添加事件
iconCls : 'blist'
});
var addZhaiiTab = function() {
var expander = new Ext.grid.RowExpander( {
tpl : new Ext.Template('<p><b>Title:</b> {title}<br>',
'<p><b>Contents:</b> {contents}</p>')
});
var cm = new Ext.grid.ColumnModel([expander, {
header : 'id',
dataIndex : 'id'
}, {
header : 'title',
width : 300,
dataIndex : 'title'
}, {
header : 'zhaier',
dataIndex : 'zhaier'
}, {
header : 'date',
dataIndex : 'date'
}, {
header : 'sc',
dataIndex : 'sc'
}, {
header : 'hh',
dataIndex : 'hh'
}]);
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '../../getZhaii.do'
}),
reader : new Ext.data.JsonReader( {
totalProperty : 'totalProperty',
root : 'root'
}, [ {
name : 'content'
}, {
name : 'hh'
}, {
name : 'sc'
}, {
name : 'date'
}, {
name : 'zhaier'
}, {
name : 'title'
}, {
name : 'id'
}])
});
ds.load( {
params : {
start : 0,
limit : 10
}
});
if (Ext.isEmpty(zhaiiGrid)) {
zhaiiGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'zhaiiGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'zhaiiGrid',
iconCls : 'icon-grid',
closable : true,
// top处添加事件按钮
tbar : [addZhaiiAction],
// bottom处的分页栏
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: '没有记录'
})
});
// .show()了才会显示
centerPanel.add(zhaiiGrid).show();
} else if (zhaiiGrid = centerPanel.getItem('zhaiiGrid')) {
// zhaiiGrid.show();
} else {
zhaiiGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'zhaiiGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'adsfasd',
iconCls : 'icon-grid',
closable : true,
tbar : [addZhaiiAction],
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: '没有记录'
})
});
centerPanel.add(zhaiiGrid).show();
}
}
// 给link1添加事件
Ext.get('link1').on('click', addZhaiiTab);
// 初始化页面时,便添加zhaiiTab
addZhaiiTab();
以上是一些代码片断,前几天在研究desktop,想实现成动态的页面,代码还没写完。
暂时放下Extjs一些日子,明天开始学习Flex,既然都是客户端框架,应该多少有些共通之处吧。谁知道呢,学学看吧。
本文链接:http://www.blogjava.net/realsmy/archive/2008/01/12/174791.html
评论
1 楼
andy_ghg
2009-09-19
EXTJS与FLEX各自有各自的应用领域,在开发过程中首先考虑的应该是合适不合适,而不是说Flex界面比EXTJS好就去用Flex,楼主,我真羡慕你单位还培训Flex.流口水中
相关推荐
本资源包包含了与ExtJS 3.4相关的学习资料,包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`,旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...
四、《Extjs4.0学习笔记.wps》 这份笔记可能是个人学习过程中的记录,可能包含了一些实践案例和代码示例,对特定功能的使用进行了详细解析。通过阅读这些笔记,读者可以了解到实际项目中遇到的问题和解决方法,有助...
《EXT学习笔记.doc》可能是个人或团队在学习EXTJS过程中整理的笔记,包含了他们的实践经验、技巧和问题解决方案,对于学习EXTJS非常有帮助。 《EXT核心API详解.pdf》是对EXTJS核心API的深入解析,适合想要深入研究...
通过学习这份笔记,开发者可以深入了解ExtJS的架构,提高开发效率,打造出功能丰富且用户体验优秀的Web应用程序。 总之,《AnyFo - ExtJS 移魂大法》是一份详尽的ExtJS实战指南,无论对于新手还是有经验的开发者,...
总的来说,这个学习资源包将帮助你深入了解EXTJS的开发,包括基本概念、实践应用以及与其它技术的交互。通过阅读这些笔记和实例,你可以逐步提升EXTJS的编程技能,为构建高质量的Web应用程序打下坚实基础。
在"韩顺平—玩转oracle视频教程笔记"中,你将深入学习Oracle的使用技巧和管理方法,涵盖数据库设计、SQL查询、存储过程、触发器、索引优化等多个方面。教程可能还会涉及数据库备份与恢复、性能监控与调优,这些都是...
**jQuery EasyUI 学习笔记珍藏版** jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了丰富的UI组件,使得构建用户界面变得更加简单高效。这个珍藏版的学习笔记涵盖了广泛的jQuery EasyUI主题,旨在...
8. **ExtJs学习实例.pdf**:这份资料可能包含了一系列的实战案例,通过实际代码示例帮助开发者加深对ExtJS的理解,包括但不限于数据加载、图表绘制、复杂布局的实现等。 通过这些资源的学习,你可以系统地掌握ExtJS...
值得一提的是,原本广为人知的ExtJS在2011年正式更名为了Sencha,并且原域名www.extjs.com已经转向了新的官方网站www.sencha.com。 #### 关键人物与Sencha团队 Sencha团队汇集了多位业界大牛,其中包括JQTouch的...
8. **PDF和TXT文档**:`extjs表格、树控件.pdf`和`EXT学习十日.pdf`、`EXT学习十日.txt`很可能是更深入的教程,涵盖了更多控件的使用和进阶技巧,可能还包括了一些示例代码和实战项目。 通过这些资料,开发者不仅...
2. EXT_JS实用开发指南_个人整理笔记.docx:这是一份个人整理的学习笔记,可能包含了一些实战经验,对于学习EXT JS的实际应用和解决常见问题很有帮助。 3. ExtJS实用开发指南.pdf:同名但格式不同的文档,可能提供了...
"java技术从入门到精通(孙鑫)学习笔记.rar"是基于知名Java讲师孙鑫的教学材料,他的教学风格深入浅出,这本学习笔记可能包含了从基础语法到实际项目开发的全面指导,是系统学习Java的好资源。 总的来说,这个压缩包...
接下来是"ExtJS2.0开发与实践笔记"系列文档。这些文档深入探讨了Ext2.0的各个方面,可能包括布局管理(Layouts)、数据存储(Data Stores)、Ajax通信(Ajax Requests)以及组件扩展(Component Extension)。布局...
"EXT学习文档 .doc"则可能是个人或社区编写的EXT学习笔记,通常会包含作者在实践中遇到的问题和解决方案,这种实战经验对初学者来说极具价值,可以避免走弯路。 总的来说,这个名为"ext资料大全"的压缩包提供了一套...
这个项目采用ExtJs+struts2+hibernate+spring等技术栈实现了图书管理系统,适合中级开发者用来学习企业级应用的开发方法。 #### 二十四、java聊天程序 该聊天程序支持私聊、公聊、截图、文件传输等功能,是一份...