ExtJs+Json实践例子（1）(因篇幅过长，例子分为两部分)（转）
?
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文件，它完成了项目所需要的所有核心功能，具有很高的参考价值。当然代码量也是比较大的：
?
?
// create main tabpanelvar 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);} ?
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(); } }); });?