- 浏览: 191134 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
zm8859001:
不错,我也遇到这样的问题了!autoLoad,加载后总是出现页 ...
ExtJS中新增tabpanel加载其它完整页面(viewport布局中) -
辉煌之至:
不会啊,求
ExtJS+S2SH:使用Grid加载后台数据并分页(推荐给新学的朋友) -
chenglnb:
还不错 要是能实现复选框的选定就好了
ExtJS+S2SH:使用Grid加载后台数据并分页(推荐给新学的朋友) -
keylab:
运行你这个例子,发现有 bug啊,不能还原等等的
ExtJS之图片浏览器(转载推荐) -
bcwt:
高手啊,正好遇到这个问题,谢谢!
Class org.apache.struts2.json.JSONWriter can not access a member of *
ExtJS本质上也是一个AJAX的框架,但是它和DWR有很大不同,首先,DWR是JAVA世界的产物,而ExtJS是后台无关的。也就是说,ExtJS的后台可以是.NET,PHP或者JAVA都可以。其实我们在网上看到的大部分例子都是PHP或者.NET,后台的。这说明ExtJS在所有后台都很受青睐。其次,DWR只关注客户端与服务器端的交互,没有自己的界面组件,而ExtJS最让人惊叹的就是其丰富而强大的界面组件,除此以外,它自身也能轻松地异步访问后台组件。现如今,RIA(富客户端应用)已经成了不争的趋势。那我们现在还不赶紧学习,还更待何时?
来张页面刺激下学习欲望先!
我们知道,在WEB开发中有一些共同的开发重心,譬如登陆注册,CRUD(增,删,改,查),数据的分页,排序和过滤,数据的统计报表,数据的导入导出,Cookies和Sessions的管理等。我们在网上看到很多ExtJS的零零星星的应用,有人做了CRUD,有人做了登陆注册,有了做了复杂查询,还有人扩展了分页,做了服务器端的排序,数据的导出等等,但就是没有人提供一个强大而翔实的案例,把这些ExtJS的知识点统一到项目中,或者有的人已经做除了一些真实的项目,可是又不愿意拿出来分享。哎,有感于此,老许来了。
既然是实战,当然需要大家有一定的根基,我给大家提供的开发工具也好,开发文档也罢,都是来帮助大家高效地学习和开发。另外,大家要把网上零零星星的例子多跑几个,然后再进入我们项目的学习。
好啦,大家还是要快速搭建好ExtJS应用的环境。测试通过。在我们的整个项目应用中,就两张核心的JS文件,它完成了项目所需要的所有核心功能,具有很高的参考价值。当然代码量也是比较大的:
1. 首先是init-main.js,这里定义了整个应用的主体布局视图Viewport。它和我们HTML中的frameset有点类似。在我们的主显示区里还放了一个TabPanel,这就是我们桌面应用中常见的选项面板。要理解下面的JS呢,你必须先掌握JSON这种数据格式,这个格式我在前面的ExtJS应用中已经详细讲过,如果还不太清楚,到http://www.json.org/json-zh.html 去看看,JSON在整个ExtJS体系里占有重要地位,熟悉JSON格式的人会对名/值对,{},[]很敏感。大家看到,在Viewport类和TabPanel类里都传入一个JSON对象来初始化整个组件。其次,你还要有容器和组件的概念,每个容器组件(容器同时也是组件,这是相对的,它放东西的时候是容器,被放置其中的时候就是组件!)都有一个items参数指定一个JSON数组来表明自己容纳的组件。我们要完成的功能是上面放公司的LOGO信息,左边是导航菜单栏,右边是主显示区。代码如下:
// create main tabpanel
var contentPanel = new Ext.TabPanel({
id : "tabPanel",
region : 'center',
enableTabScroll : true,
resizeTabs : true, // turn on tab resizing
deferredRender : false,
minTabWidth : 115,
// tabWidth:135,
activeTab : 0,
iconCls : 'tabs',
items : [{
contentEl : 'center',
title : '主页',
autoScroll : true
}],
defaults : {
autoScroll : true
},
plugins : new Ext.ux.TabCloseMenu()
});
//ExtJs应用的入口
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// init main page framework
var viewport = new Ext.Viewport({
layout : 'border',
items : [{
region : 'north',
html : '<img src="resources/images/dwr_logo.gif" width=210 height=100><img src="resources/images/struts.png" ><img src="resources/images/hibernate.gif" width=200 height=90 ><img src="resources/images/spring_logo.png" width=200 height=70><img src="resources/images/extjs_logo.gif" height=60>',
split : true,
height : 130,
minSize : 100,
maxSize : 200,
collapsible : true,
title : '房屋出租系统',
margin : '0 0 0 0'
// border: false,
// layout:"absolute"
}, {
region : 'west',
id : 'west-panel',
title : '菜单栏',
split : true,
width : 200,
minSize : 175,
maxSize : 400,
collapsible : true,
margins : '0 0 5 5',
cmargins : '0 5 5 5',
layout : 'accordion',
layoutConfig : {
animate : true
},
items : [{
title : '房屋管理',
html : Ext.getDom('userMenus').innerHTML,
autoScroll : true,
border : false,
iconCls : 'user'
}, {
title : '机构管理',
html : Ext.getDom('unitMenus').innerHTML,
border : false,
autoScroll : true,
iconCls : 'unit'
}, {
title : '系统设置',
html : Ext.getDom('settingMenus').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : '电子日历',
// html : Ext.getDom('settingMenus').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings',
items : [new Ext.form.DateField()]
}, {
title : '企业短信',
html : Ext.getDom('msg').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : '公文审批',
// html : Ext.getDom('msg').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : '电子会议',
html : Ext.getDom('eMeeting').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : '电子邮件',
// html : Ext.getDom('msg').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : '电子文档',
// html : Ext.getDom('msg').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : '个性化设置',
// html : Ext.getDom('msg').innerHTML,
border : false,
autoScroll : true,
iconCls : 'settings'
}]
}, contentPanel]
});
// init main page tables
var panel = new Ext.Panel({
id : 'main-panel',
baseCls : 'x-plain',
renderTo : Ext.get("center"),
layout : 'table',
layoutConfig : {
columns : 2
},
defaults : {
frame : true,
width : 395
},
items : [{
title : '公告信息',
colspan : 2,
collapsible : true,
width : 800,
height : 430,
contentEl : 'afficheDiv'
}]
});
// clear temp elements.
Ext.getDom("menus").innerHTML = "";
});
// 定义菜单导航函数
function onClickMenuItem(node) {
var n = contentPanel.getComponent(node.id);
if (!n) { // //判断是否已经打开该面板
n = contentPanel.add({
'id' : node.id,
'title' : node.innerHTML,
iconCls : 'tabs',
closable : true,
autoLoad : {
url : 'tabFrame.jsp?url=' + node.href,
callback : this.initSearch,
scope : this,
scripts : true
} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
}
2. 然后是init-house.js,这是最重要也是最复杂的一个JS文件了。这个JS里面涉及到Ext.Window, Ext.FormPanel,Ext.grid.CheckboxSelectionModel,Ext.data.Record,Ext.grid.ColumnModel,Ext.data.Store,Ext.PagingToolbar,Ext.grid.GridPanel,Ext.MessageBox,Ext.menu.Menu等众多重要的ExtJS控件,要知道它们之间的关系就要先了解我们要做的事!这个应用中,我们要完成的界面功能是在页面上显示一张表格(这张表格的列由ColumnModel决定,数据行由Store决定!),表格上方显示一排工具按钮,分别用来做添加,修改,删除,复制,导出等功能,下方显示分页栏来展现分页数据,表格里面还设置了行级的右键菜单,可以完成和上排工具按钮一样的功能。在表格之上,我们还放置了一个查询表单,来完成我们强大的信息检索功能。最后我们添加和修改数据的时候,都会弹出一个窗口,里面放置着添加或修改数据的表单。还有,当用户执行了不正确的操作时,要弹出相应的提示对话框。OK,怀着攻克难关的激情,我们来看看这1000行代码吧!
var ds;// 数据源 var grid;// 数据显示表格 var searchForm;// 查询表单 var form;//添加/修改的表单 var win;// 添加或修改窗口 var limit = 5;//每页显示的记录数 var ptb;// 分页控件 var TopicRecord;//记录对象 function getInsertForm() { form = new Ext.FormPanel({ labelWidth : 100, monitorValid : true,// 把有formBind:true的按钮和验证绑定 baseCls : 'x-plain', defaults : { width : 200 }, defaultType : 'textfield',// 默认字段类型 // 定义表单元素 items : [{ fieldLabel : '标题', name : 'house.title', allowBlank : false }, { fieldLabel : '租金', name : 'house.hireprice' }, { fieldLabel : '联系人', name : 'house.linkman' }, { fieldLabel : '联系电话', name : 'house.linktel' }, { fieldLabel : '几室', xtype : "combo", hiddenName : "house.room",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。 store : new Ext.data.SimpleStore({ fields : ['a', 'b'], data : [['1', '一'], ['2', '二'], ['3', '三']] }), valueField : 'a', displayField : 'b', mode : 'local', triggerAction : 'all', forceSelection : true, selectOnFocus : true, editable : false, readOnly : true, emptyText : "无限制!" }, { fieldLabel : '几厅', xtype : "combo", hiddenName : "house.ting",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。 store : new Ext.data.SimpleStore({ fields : ['a', 'b'], data : [['1', '一'], ['2', '二'], ['3', '三']] }), valueField : 'a', displayField : 'b', mode : 'local', triggerAction : 'all', forceSelection : true, selectOnFocus : true, editable : false, readOnly : true, emptyText : "无限制!" }, { fieldLabel : "区域", xtype : 'combo', store : new Ext.data.SimpleStore({ fields : ['id', 'name'], data : Ext.grid.areaComboBoxItems }), valueField : "id", displayField : "name", mode : 'local', forceSelection : true,// 必须选择一项 emptyText : '请选择区域...',// 默认值 name : "area", hiddenName : "house.areaId",// hiddenName才是提交到后台的input的name editable : false,// 不允许输入 triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 id : 'parent_id1', name : 'parent1', listeners : { select : function(combo, record, index) { houseService.getAllStreets(combo.value, function( data) { if (data != null) { var list2 = []; for (var i = 0; i < data.length; i++) { list2[i] = [data[i].sid, data[i].sname]; } Ext.getCmp('child_id1').clearValue(); Ext.getCmp('child_id1').store .loadData(list2); } }); } } }, { fieldLabel : "街道", xtype : 'combo', store : new Ext.data.SimpleStore({ fields : ['id', 'name'], data : [] }), valueField : "id", displayField : "name", // 数据是在本地 mode : 'local', forceSelection : true,// 必须选择一项 emptyText : '请选择街道...',// 默认值 editable : false,// 不允许输入 triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 allowBlank : false,// 该选项值不能为空 id : 'child_id1', name : "child1", hiddenName : "house.streetId" }, { fieldLabel : '房屋设施', xtype : 'textarea', name : 'house.housething' }], buttons : [{ text : '保存', formBind : true, type : 'submit', // 定义表单提交事件 handler : function() { if (form.form.isValid()) {// 验证合法后使用加载进度条 // 提交到服务器操作 form.form.doAction('submit', { url : '../houseHandler.do?action=addHouse',// 文件路径 method : 'post',// 提交方法post或get params : '', // 提交成功的回调函数 failure : function(retForm, retAction) { if (retAction.result && retAction.result == '1') { Ext.MessageBox.alert('提示', '保存数据成功!'); win.hide(); ptb.cursor=ptb.store.getTotalCount()+1-ptb.pageSize; ds.load({ params : { start : ptb.cursor, limit : ptb.pageSize } }); } else if (retAction.result && retAction.result == 'error') { Ext.MessageBox.alert('提示', '保存数据失败!'); } else { Ext.Msg.alert('错误', '服务器出现错误请稍后再试!'); } }, waitMsg : '保存数据...' }); } } }, { text : '取消', handler : function() { form.form.reset(); }// 重置表单 }] }); return form; } function getUpdateForm() { form = new Ext.FormPanel({ labelWidth : 100, monitorValid : true,// 把有formBind:true的按钮和验证绑定 baseCls : 'x-plain', defaults : { width : 200 }, defaultType : 'textfield',// 默认字段类型 // 定义表单元素 items : [{ fieldLabel : 'ID', name : 'house.hid', allowBlank : false, readOnly : true }, { fieldLabel : '标题', name : 'house.title', allowBlank : false }, { fieldLabel : '租金', name : 'house.hireprice' }, { fieldLabel : '联系人', name : 'house.linkman' }, { fieldLabel : '联系电话', name : 'house.linktel' }, { fieldLabel : '几室', xtype : "combo", hiddenName : "house.room",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。 store : new Ext.data.SimpleStore({ fields : ['a', 'b'], data : [['1', '一'], ['2', '二'], ['3', '三']] }), valueField : 'a', displayField : 'b', mode : 'local', triggerAction : 'all', forceSelection : true, selectOnFocus : true, editable : false, readOnly : true, emptyText : "无限制!" }, { fieldLabel : '几厅', xtype : "combo", hiddenName : "house.ting",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。 store : new Ext.data.SimpleStore({ fields : ['a', 'b'], data : [['1', '一'], ['2', '二'], ['3', '三']] }), valueField : 'a', displayField : 'b', mode : 'local', triggerAction : 'all', forceSelection : true, selectOnFocus : true, editable : false, readOnly : true, emptyText : "无限制!" }, { fieldLabel : "区域", xtype : 'combo', store : new Ext.data.SimpleStore({ fields : ['id', 'name'], data : Ext.grid.areaComboBoxItems }), valueField : "id", displayField : "name", mode : 'local', forceSelection : true,// 必须选择一项 emptyText : '请选择区域...',// 默认值 name : "area", hiddenName : "house.areaId",// hiddenName才是提交到后台的input的name editable : false,// 不允许输入 triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 id : 'parent_id2', name : 'parent2', listeners : { select : function(combo, record, index) { houseService.getAllStreets(combo.value, function( data) { if (data != null) { var list2 = []; for (var i = 0; i < data.length; i++) { list2[i] = [data[i].sid, data[i].sname]; } Ext.getCmp('child_id2').clearValue(); Ext.getCmp('child_id2').store .loadData(list2); } }); } } }, { fieldLabel : "街道", xtype : 'combo', store : new Ext.data.SimpleStore({ fields : ['id', 'name'], data : [] }), valueField : "id", displayField : "name", // 数据是在本地 mode : 'local', forceSelection : true,// 必须选择一项 emptyText : '请选择街道...',// 默认值 editable : false,// 不允许输入 triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 allowBlank : false,// 该选项值不能为空 id : 'child_id2', name : "child2", hiddenName : "house.streetId" }, { fieldLabel : '房屋设施', xtype : 'textarea', name : 'house.housething' }], buttons : [{ text : '修改', formBind : true, type : 'submit', // 定义表单提交事件 handler : function() { if (form.form.isValid()) {// 验证合法后使用加载进度条 // 提交到服务器操作 form.form.doAction('submit', { url : '../houseHandler.do?action=editHouse',// 文件路径 method : 'post',// 提交方法post或get params : '', // 提交成功的回调函数 failure : function(retForm, retAction) { if (retAction.result && retAction.result == '1') { Ext.MessageBox.alert('提示', '更新数据成功!'); win.hide(); ds.load({ params : { start : ptb.cursor, limit : ptb.pageSize } }); } else if (retAction.result && retAction.result == 'error') { Ext.MessageBox.alert('提示', '更新数据失败!'); } else { Ext.Msg.alert('错误', '服务器出现错误请稍后再试!'); } }, waitMsg : '更新数据...' }); } } }, { text : '取消', handler : function() { form.form.reset(); }// 重置表单 }] }); return form; } // 页面加载后执行的代码 Ext.onReady(function() { // get All unit Name for comboBox. houseService.getAllAreas(function(data) { if (data != null) { var list = []; for (var i = 0; i < data.length; i++) { list[i] = [data[i].aid, data[i].aname]; } Ext.grid.areaComboBoxItems = list; initData(); } }); });
发表评论
-
ExtJS之图片浏览器(转载推荐)
2011-03-31 07:32 71061、效果图 2、此实例是在 http://you ... -
java中怎样反向显示字符串(包含实际开发中的例子)(转载)
2011-03-31 07:27 1183法1.借助StringBuilderSt ... -
ExtJs之grid使用详解(觉得很全面,推荐)
2011-03-29 09:41 27210Ext2.0是一个javascript框架,它的Grid ... -
ExtJS+S2SH:使用Grid加载后台数据并分页(推荐给新学的朋友)
2011-03-26 16:36 3215今天琢磨了半天,终于把ExtJS+S2SH中使用grid加载后 ... -
ExtJs中一个完整GridPanel实例(转)
2011-03-25 15:07 10844博客地址http://blog.csdn.net/ws_hgo ... -
ExtJs之GridPanel、FormPanel实例推荐 (转)
2011-03-25 15:04 5555转自:http://blog.csdn.net/jianxin ... -
ExtJS使用css实现透明背景(IE支持)
2011-03-11 21:49 1114应用PNG图片的透明或 ... -
ExtJS中关于ComboBox加载后台数据
2011-03-06 20:39 5894今天忙了一天,终于解决了让我头疼的ComboBox加载后台数据 ... -
ExtJs的ComboBox级联实现(转)
2011-03-05 20:48 1331ExtJs的ComboBox级联实现 1、首先定义store ... -
ExtJS 给textfield赋值的方法总结
2011-03-02 19:54 1607var value="值"; (1) ... -
ExtJS中新增tabpanel加载其它完整页面(viewport布局中)
2011-03-01 20:40 4475这个问题困扰了我两天 ... -
ExtJS之toolbars(很漂亮的界面)
2010-12-04 15:37 2360/*! * Ext JS Library 3.3.0 ... -
ExtJs+Json实践例子(2)
2010-11-29 10:50 2117// 初始化数据 function initData() { ... -
ExtJs实践:支持返回Json格式的ComboBox(转)
2010-11-28 19:52 1363假如我们程序中有产品(Product)和产品分类(Cat ... -
Extjs整合struts2(1)
2010-11-16 09:51 1074步骤1、在项目中添加struts2的库。如下 步骤2、 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2010-11-09 19:57 793Ext中的get、getDom、getCmp、getBod ... -
Ext JS 入门之panel,TabPanel的简单使用
2010-10-17 14:12 1179<!DOCTYPE html PUBLIC " ...
相关推荐
Extjs Tree + JSON + Struts2 例子
ExtJs + Struts2 + JSON 程序总结
简单extjs+json+servlet实现,页面展示,仅供大家参考
ssh+extjs+json
struts2+extjs+json整合实例
@@@extjs+struts2+json plugin的例子
Sping+Hibernate+Extjs+Json开发实例
EXTJS + Struct +mysql 数据库脚本包含在类 json实现前台后台数据通信
extjs+struts2+hibernate+json登录程序,主要讲解struts2配置JSON与前台extjs通信,异步数据交换,很强大
本文是自己看了很多extjs搜索的的内容,实现的最简洁的方式,不是直接调用ext 自带的方法,自己从后台查询,效率相对较高。
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
Extjs+Kindeditor的例子
ExtJS+struts2+json登陆实例--源码,适合初学者
extjs tree + json+struts2示例源代码extjs tree + json+struts2示例源代码
Extjs Tree + JSON + Struts2 开发war包
上网找资料,都是一些不全的. struts2+extjs2.1+json+hibernate+spring 自己整合的例子. 当中hibernate数据源可以配置自己的.后台输送json 前台接收.
使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...
extjs+asp例子
Extjs+SpringMVC+MyBaits财务管控系统
Extjs Tree + JSON + Struts2 示例源代码