转:Extjs复习之管理后台的通用模版

 

 

分类： ajax/extjs2011-08-20 15:48 1553人阅读 评论(2) 收藏 举报

很久没有用过ExtJS，正好一个新的在线系统需要搭建一个运营平台，没有交互，没有页面设计，没有原型，我那点可怜的美感只能借助Extjs来搭建了。

1.通用的架子典型的Border布局+tree菜单+TabPanel的内容区的框架，模块清晰简单，菜单可配置。

 

[javascript] view plaincopy
  1. Ext.BLANK_IMAGE_URL="ext/resources/images/default/s.gif";  
  2. Ext.QuickTips.init();     
  3. /*菜单面板*/  
  4. MenuPanel=function(config){  
  5.     config=config||{};  
  6.     var config_=Ext.applyIf({  
  7.         layout:'accordion',  
  8.         region:'west',  
  9.         split:true,  
  10.         width:200,  
  11.         collapsible:true,  
  12.         border:false,  
  13.         animate: true  
  14.     },config);  
  15.     MenuPanel.superclass.constructor.call(this,config_);  
  16. };  
  17. Ext.extend(MenuPanel,Ext.Panel,{});  
  18.   
  19. /*菜单模块面板*/  
  20. ModulePanel=function(config){  
  21.         config=config||{};  
  22.         var nodes_loader=new Ext.tree.TreeLoader({dataUrl:config.dataUrl});  
  23.         ModulePanel.superclass.constructor.call(this,{  
  24.             animate: true,  
  25.             title:config.title,  
  26.             rootVisible:false,  
  27.             iconCls:'tab_icon',  
  28.             region:'west',  
  29.             split:true,  
  30.             width:200,  
  31.             collapsible:true,  
  32.             root:{  
  33.             },  
  34.             loader:nodes_loader  
  35.         });  
  36. };  
  37.   
  38. Ext.extend(ModulePanel,Ext.tree.TreePanel,{  
  39.     setTargetOpen:function(contentPanel){  
  40.             this.on("click",function(node){  
  41.                 if(!node.attributes.leaf){  
  42.                     return true;  
  43.                 }  
  44.                 var tabid="module_tab_"+node.attributes.id;  
  45.                 var exist_panel=contentPanel.getComponent(tabid);  
  46.                 if(exist_panel){  
  47.                     contentPanel.setActiveTab(exist_panel);  
  48.                 }else{  
  49.                     var iframe_in_tab="iframe_"+tabid;  
  50.                     var iframe_html="<iframe width=100% height=100% id='"+iframe_in_tab+"'/>"  
  51.                     var panel=new Ext.Panel({  
  52.                         title:node.attributes.text,  
  53.                         id:tabid,  
  54.                         closable:true,  
  55.                         iconCls:'tab_icon_2',  
  56.                         html:iframe_html  
  57.                     });  
  58.                     contentPanel.add(panel);  
  59.                     contentPanel.setActiveTab(panel);  
  60.                     Ext.get(iframe_in_tab).set({  
  61.                         src:node.attributes.url  
  62.                     });  
  63.                 }  
  64.             });  
  65.     }  
  66. });  
  67.   
  68. /*主面板*/  
  69. MainPanel=function(){  
  70.         MainPanel.superclass.constructor.call(this,{  
  71.             region:'center',  
  72.             margins:'0 5 5 0',  
  73.             resizeTabs: true,  
  74.             minTabWidth: 135,  
  75.             tabWidth: 135,  
  76.             enableTabScroll: true,  
  77.             activeTab: 0,  
  78.             items:[{  
  79.                 title:'公告面板',  
  80.                 closable:true,  
  81.                 html:'管理平台欢迎您，如有问题，请联系coreycui,timwen,liubangchen'  
  82.             }],  
  83.             tbar:new Ext.Toolbar({  
  84.                 items:[  
  85.                     {xtype:'displayfield',value:'内容页面导航: ',style:'color:RED'},  
  86.                     {xtype:'button',iconCls:'prev_icon',tooltip:'后退',handler:function(){  
  87.                                  var activePanel=this.findParentByType("toolbar",false).ownerCt.getActiveTab();  
  88.                                  var activePanelId=activePanel.getItemId();  
  89.                         var iframe_in_tab=Ext.get("iframe_"+activePanelId);  
  90.                         Ext.getDom("iframe_"+activePanelId).contentWindow.history.back();  
  91.                     }},     
  92.                     {xtype:'button',iconCls:'next_icon',tooltip:'前进',handler:function(){  
  93.                                  var activePanel=this.findParentByType("toolbar",false).ownerCt.getActiveTab();  
  94.                                  var activePanelId=activePanel.getItemId();  
  95.                         var iframe_in_tab=Ext.get("iframe_"+activePanelId);  
  96.                         Ext.getDom("iframe_"+activePanelId).contentWindow.history.forward();  
  97.                     }},  
  98.                     {xtype:'button',iconCls:'refresh_icon',tooltip:'刷新',handler:function(){  
  99.                                  var activePanel=this.findParentByType("toolbar",false).ownerCt.getActiveTab();  
  100.                                  var activePanelId=activePanel.getItemId();  
  101.                         var iframe_in_tab=Ext.get("iframe_"+activePanelId);  
  102.                         Ext.getDom("iframe_"+activePanelId).contentWindow.document.location.reload();  
  103.                     }}  
  104.                 ]  
  105.             })  
  106.         });  
  107. }  
  108. Ext.extend(MainPanel,Ext.TabPanel,{});  
  109.   
  110. Ext.onReady(function(){  
  111.     var contentPanel=new MainPanel();  
  112.       
  113.       
  114.     var menu_panel=new ModulePanel({  
  115.         title:'功能导航',  
  116.         dataUrl:'menu_node.jsp'  
  117.           
  118.     });  
  119.       
  120.     menu_panel.setTargetOpen(contentPanel);  
  121.       
  122.       
  123.     var viewport=new Ext.Viewport({  
  124.         layout:'border',  
  125.         items:[  
  126.             {region:'north',border:false,contentEl:'header',split:true},  
  127.             menu_panel,  
  128.             contentPanel  
  129.         ]  
  130.     });  
  131. });  

菜单控制基于另外的一个json页面，可方便的接入权限控制，配置如下：
[html] view plaincopy
  1. [  
  2.     {  
  3.         text:'直通车',children:[  
  4.             {text:'a1',leaf:true,url:'http://com/g/s?aid=index&g_ut=1',id:'a1'},  
  5.             {text:'a2',leaf:true,url:'http://com/g/s?aid=index&g_ut=2',id:'a2'},  
  6.             {text:'a3',leaf:true,url:'http://.com',id:'a3'},  
  7.             {text:'a4',leaf:true,url:'http://com',id:'a4'},  
  8.             {text:'a5',leaf:true,url:'http://0',id:'a5'},  
  9.             {text:'a6',leaf:true,url:'http://a1p',id:'a6'}  
  10.         ]  
  11.     },  
  12.     {  
  13.         text:'XX管理',children:[  
  14.             {text:'XX查询',leaf:true,url:'<%=request.getContextPath()%>/xxmanage/querycp.jsp',id:'xx_query'},  
  15.             {text:'XX审核',leaf:true,url:'<%=request.getContextPath()%>/xxmanage/querycp4manage.jsp',id:'xx_manage'}   
  16.         ]  
  17.     }  
  18. ]  

为了防止内存泄漏和全局变量泛滥，采用继承和组合的方式来组织整个页面的UI结构。继承的模式大致如下：
[javascript] view plaincopy
  1. MenuPanel=function(config){  
  2.     config=config||{};  
  3.     var config_=Ext.applyIf({  
  4.         layout:'accordion',  
  5.         region:'west',  
  6.         split:true,  
  7.         width:200,  
  8.         collapsible:true,  
  9.         border:false,  
  10.         animate: true  
  11.     },config);  
  12.     MenuPanel.superclass.constructor.call(this,config_);  
  13. };  
  14. Ext.extend(MenuPanel,Ext.Panel,{});  


[javascript] view plaincopy
  1. MenuPanel.superclass.constructor.call(this,config_);  

主要用来在子类的构造函数里面显示的调用父类的构造函数。
[javascript] view plaincopy
  1. var config_=Ext.applyIf();  
主要用来指定一些固定的初始化option

2.Grid模块
[javascript] view plaincopy
  1. var columnModel=new Ext.grid.ColumnModel([  
  2.                             {header:'日期',dataIndex:'stat_date'}  
  3.                         /*............*/  
  4.                 ]);  
  5.                   
  6.                 var grid=new Ext.grid.GridPanel({  
  7.                     cm:columnModel,  
  8.                     store:store,  
  9.                     renderTo:'grid',  
  10.                     autoHeight:true,  
  11.                     viewConfig:{  
  12.                         forceFit:true  
  13.                     },  
  14.                     loadMask:{  
  15.                         msg:'不要着急，休息一下，休息一下 ：）..'  
  16.                     },  
  17.                     bbar:new Ext.PagingToolbar({  
  18.                         pageSize:10,  
  19.                         store:store,  
  20.                         stripeRows:true,  
  21.                         displayInfo:true,  
  22.                         displayMsg:'显示第{0}条到第{1}条,一共{2}条',  
  23.                         emptyMsg:'无记录'  
  24.                     })  
  25.                 });  
  26.                   
  27.                 var form=new Ext.form.FormPanel({  
  28.                     renderTo:'data_setting_div',  
  29.                     labelAlign:'right',  
  30.                     labelWidth:60,  
  31.                     items:[  
  32.                         {  
  33.                             xtype: 'compositefield',  
  34.                             fieldLabel: '日期范围',  
  35.                             defaults:{  
  36.                                 width:150  
  37.                             },  
  38.                             items:[  
  39.                                 {xtype:'datefield',id:'startdate',name:'startdate'},  
  40.                                 {xtype:'displayfield',value:'--',width:10},  
  41.                                 {xtype:'datefield',name:'enddate',id:'enddate'},  
  42.                                 {xtype:'button',text:'查询',listeners:{  
  43.                                     click:function(){  
  44.                                         startDate=form.getForm().findField("startdate").getValue().format('Y-m-d')  
  45.                                         endDate=form.getForm().findField("enddate").getValue().format('Y-m-d');  
  46.                                         store.reload();  
  47.                                     }  
  48.                                 }}  
  49.                             ]  
  50.                         }  
  51.                    ]  
  52.                 });  
  53.                 store.load({params:{start:0, limit:10,fromButton:'refresh'}});  

强制单元格填充表格：
[javascript] view plaincopy
  1.                                    viewConfig:{  
  2.     forceFit:true  
  3. }  

第一次渲染grid的时候必须显示load store，并且需要指定start和limit这两个分页参数，store不会去自动取在grid中配置的。
[javascript] view plaincopy
  1. store.load({params:{start:0, limit:10,fromButton:'refresh'}});  

如果需要查询条件：
[javascript] view plaincopy
  1. {xtype:'button',text:'查询',listeners:{  
  2.     click:function(){  
  3.         startDate=form.getForm().findField("startdate").getValue().format('Y-m-d')  
  4.         endDate=form.getForm().findField("enddate").getValue().format('Y-m-d');  
  5.         store.reload();  
  6.     }  
  7. }}  
还必须添加以下事件：
[javascript] view plaincopy
  1.                             var store=new Ext.data.Store({  
  2. proxy:new Ext.data.HttpProxy({  
  3.     url:gridDataUrl  
  4. }),  
  5. reader:new Ext.data.JsonReader({  
  6.     totalProperty: 'totalCount',  
  7.     root:'list'  
  8. },[  
  9.     {name:'stat_date'}  
  10.     /*{}*/  
  11. ]),  
  12. listeners:{  
  13.     beforeload:function(thiz,options){  
  14.          Ext.apply   
  15.             (   
  16.              thiz.lastOptions.params,     
  17.                 {    
  18.                     startDate : startDate,    
  19.                     endDate : endDate  
  20.                 }   
  21.             );  
  22.     }  
  23. }  
  24. );  

[javascript] view plaincopy
  1. thiz.lastOptions.params  
代表最后提交的参数。


3.扩展Extjs HTMLEditor，图片文件上传并插入。
Extjs HTML Editor是比较坑爹的，自己扩展了一个图片插入的组件。使用方式如下：
[javascript] view plaincopy
  1.                                                              new Ext.form.HtmlEditor({  
  2. fieldLabel:'正文',  
  3. id:'news_details',  
  4. name:'news_details',  
  5. plugins:new FileInsertPlugin({url:FileUpload.url,MVC_BUS:'FileManager',MVC_ACTION:'upload'})  
  6. ),  


[javascript] view plaincopy
  1. FileInsertPlugin:  
[javascript] view plaincopy
  1.       /*coreycui*/  
  2.       FileInsertPlugin = function(config) {  
  3.     config=config||{};  
  4.     var editor;  
  5.     var win;  
  6.     /*创建图片*/  
  7.     var createImage = function() {  
  8.         var imageWidth = win.getImageWidth();  
  9.         var imageHeight = win.getImageHeight();  
  10.         var element = document.createElement("img");  
  11.         element.src = win.getImageSrc();  
  12.         element.alt = win.getImageAlt();  
  13.         if (imageWidth == null || imageWidth == '') {  
  14.         } else {  
  15.             element.style.width = imageWidth + "px"  
  16.         }  
  17.         if (imageHeight == null || imageHeight == '') {  
  18.         } else {  
  19.             element.style.height = imageHeight + "px"  
  20.         }  
  21.         return element;  
  22.     }  
  23.       
  24.     // 把图片插入editor中  
  25.     var insertImageByBrowser = function() {  
  26.         if (Ext.isIE) {  
  27.             return function() {  
  28.                 var selection = editor.doc.selection;  
  29.                 var range = selection.createRange();  
  30.                 range.pasteHTML(createImage().outerHTML);  
  31.             };  
  32.   
  33.         } else {  
  34.             return function() {  
  35.                 var selection = editor.win.getSelection();  
  36.                 if (!selection.isCollapsed) {  
  37.                     selection.deleteFromDocument();  
  38.                 }  
  39.                 selection.getRangeAt(0).insertNode(createImage());  
  40.             };  
  41.         }  
  42.     }();  
  43.       
  44.     /*插入图片*/  
  45.     var insertImage = function() {  
  46.         editor.win.focus();  
  47.         insertImageByBrowser();  
  48.         editor.updateToolbar();  
  49.         editor.deferFocus();  
  50.     };  
  51.       
  52.     /*图片成功回调*/  
  53.     var whenImgUploadSuccess=function(result){  
  54.         insertImage();  
  55.         win.close();  
  56.     };  
  57.     /*图片失败回调*/  
  58.     var whenImgUploadFailure=function(result){  
  59.         Msg.MessageBox.alert("图片上传失败",result.msg);  
  60.         win.close();  
  61.     }  
  62.       
  63.     /*打开图片上传窗口*/  
  64.     var openImageWindow = function() {  
  65.         win=new FileUploadWindow(config);  
  66.         win.setSuccessCallback(whenImgUploadSuccess);  
  67.         win.setFailureCallback(whenImgUploadFailure);  
  68.         win.show(this);  
  69.     }  
  70.       
  71.       
  72.     var onRender=function(){  
  73.         editor.tb.add({  
  74.             itemId : 'image',  
  75.             cls : 'x-btn-icon x-edit-image',  
  76.             handler : openImageWindow,  
  77.             tooltip : {  
  78.                 title : '图片',  
  79.                 text : '插入图片',  
  80.                 cls : 'x-html-editor-tip'  
  81.             }  
  82.         });  
  83.     }  
  84.     return {  
  85.         init : function(htmlEditor) {  
  86.             editor = htmlEditor;  
  87.             editor.on('render',onRender);   
  88.         }  
  89.     }  
  90. }  

插件的形式主要是在init中做文章，宿主会render后init这个插件：
[javascript] view plaincopy
  1.                     init : function(htmlEditor) {  
  2. editor = htmlEditor;  
  3. editor.on('render',onRender);   
主要是将生成的HTML代码插入在编辑器中：
[javascript] view plaincopy
  1.                                    var selection = editor.doc.selection;  
  2. var range = selection.createRange();  
  3. range.pasteHTML(createImage().outerHTML);  

文件上传的窗口如下：
[javascript] view plaincopy
  1. /*文件上传窗口*/  
  2. FileUploadWindow=function(config){  
  3.         config=config||{};  
  4.         /*成功的回调函数*/  
  5.         var successCallback;  
  6.         var failureCallback;  
  7.         var fileUrl;  
  8.         var fileUploadForm=new Ext.form.FormPanel({  
  9.                         fileUpload:true,  
  10.                         url:config.url,  
  11.                         labelAlign:'right',  
  12.                         labelWidth:60,  
  13.                         defaults:{  
  14.                                 anchor:'-20'  
  15.                         },        
  16.                         items:[   
  17.                                 {fieldLabel:'本地文件',xtype:'textfield',name:'file',id:'file',inputType:'file'},  
  18.                                 {fieldLabel:'文件描述',xtype:'textfield',name:'filedesc',id:'filedesc',width:190},  
  19.                                 {fieldLabel:'高度',xtype:'textfield',name:'fileheight',id:'fileheight',width:190},  
  20.                                 {fieldLabel:'宽度',xtype:'textfield',name:'filewidth',id:'filewidth',width:190}  
  21.                         ],        
  22.                         buttons:[  
  23.                                 {text:'提交',handler:function(){  
  24.                                             fileUploadForm.getForm().submit({  
  25.                                             params:config,  
  26.                                             failure:function(form,action){  
  27.                                                 if(failureCallback){  
  28.                                                     failureCallback(action.result);  
  29.                                                 }  
  30.                                             },  
  31.                                             success:function(form,action){  
  32.                                                 fileUrl=action.result.fileUrl;  
  33.                                                 if(successCallback){  
  34.                                                     successCallback(action.result);  
  35.                                                 }  
  36.                                             }  
  37.                                         });  
  38.                                 }}        
  39.                         ]         
  40.         });       
  41.           
  42.         Ext.apply(config,{  
  43.                 width:325,  
  44.                 title:'图片插入',  
  45.                 autoHeight:true,  
  46.                 items:[fileUploadForm]  
  47.         });       
  48.         FileUploadWindow.superclass.constructor.call(this,config);  
  49.         /*获取表单*/  
  50.         this.getForm=function(){  
  51.             return fileUploadForm;  
  52.         }  
  53.         /*获取基础表单*/  
  54.         this.getBasicForm=function(){  
  55.             return fileUploadForm.getForm();  
  56.         }  
  57.         /*设置成功回调函数*/  
  58.         this.setSuccessCallback=function(callbackfn){  
  59.             successCallback=callbackfn;  
  60.         }  
  61.         /*设置失败回调函数*/  
  62.         this.setFailureCallback=function(callbackfn){  
  63.             failureCallback=callbackfn;  
  64.         }  
  65.         this.getImageSrc=function(){  
  66.             return fileUrl;  
  67.         }  
  68.         this.getImageAlt=function(){  
  69.             return this.getBasicForm().findField('filedesc').getValue();  
  70.         }  
  71.         this.getImageWidth=function(){  
  72.             return this.getBasicForm().findField('filewidth').getValue();  
  73.         }  
  74.         this.getImageHeight=function(){  
  75.             return this.getBasicForm().findField('fileheight').getValue();  
  76.         }  
  77. }  
  78.   
  79. Ext.extend(FileUploadWindow,Ext.Window,{});  

事实上就是一个文件上传的扩展窗口，可以在初始化参数中指定文件上传的URL路径，将上传成功和失败的回调钩子的实现留给了调用者。向外提供了获取图片上传后的图片的属性。

4.一个增删改查的窗口抽取。
一个grid配上了一个用于增改的window。将window和grid的控制逻辑抽取出来，将window中的表单，记录新增的URL，记录修改的URL，记录内容获取的URL路径暴露出来。在grid的toolbar中新增如下功能按钮以及相对的数据：
[javascript] view plaincopy
  1.                                             tbar:new Ext.Toolbar({  
  2.     items:[  
  3.         {xtype:'button',text:'新增新闻',iconCls:'add',handler:function(thiz,option){  
  4.             var newsForm=new NewsForm(mvcUrl);  
  5.             var newsAddWin=new AddOrEditWindow({autoScroll:true,width:800,height:500,title:'新增新闻',mvcUrl:mvcUrl},newsForm)  
  6.             newsAddWin.show();  
  7.             newsAddWin.setParams({  
  8.                 MVC_BUS:'News',  
  9.                 MVC_ACTION:'add'  
  10.             });  
  11.             newsAddWin.setSuccessCallback(function(){  
  12.                 store.reload();  
  13.             });  
  14.         }},  
  15.           
  16.            {xtype:'button',text:'编辑新闻',iconCls:'icon_window',handler:function(thiz,option){  
  17.         var selections=sm.getSelections();  
  18.         if(selections.length!=1){  
  19.             Ext.example.msg("警告","请选择一条记录！");  
  20.         }else{  
  21.             var id=selections[0].get("id");  
  22.             var newsForm=new NewsForm(mvcUrl);  
  23.             var newsAddWin=new AddOrEditWindow({autoScroll:true,width:800,height:500,title:'编辑新闻',mvcUrl:mvcUrl},newsForm)  
  24.             newsAddWin.show();  
  25.             newsAddWin.initFormData(config.getDataUrl,{id:id});  
  26.             newsAddWin.setParams({  
  27.                 MVC_BUS:'News',  
  28.                 MVC_ACTION:'edit'  
  29.             });  
  30.             newsAddWin.setSuccessCallback(function(){  
  31.                 store.reload();  
  32.             });  
  33.         }  
  34.     }}  
  35.     ]  
  36. })  

新增和修改的主要是玩转一个AddOrEditWindow，我们将自己构造的表单作为参数传入该window：
[javascript] view plaincopy
  1. var newsAddWin=new AddOrEditWindow({autoScroll:true,width:800,height:500,title:'编辑新闻',mvcUrl:mvcUrl},newsForm)  


当window用来编辑的时候，这个form还必须实现一个接口，obj是从记录获取URL中得到的数据对象，如下：
[javascript] view plaincopy
  1.                                  this.setFields=function(obj){  
  2. this.getForm().findField("news_title").setValue(obj.result.summary.news_title);  
  3. this.getForm().findField("summary").setValue(obj.result.summary.summary);  
  4. this.getForm().findField("status_combo").setValue(obj.result.summary.status);  
  5. this.getForm().findField("news_order").setValue(obj.result.summary.news_order);  
  6. editor.setSource(obj.result.details.news_details);  
  7. if(obj.result.types){  
  8.     for(var i=0;i<obj.result.types.length;i++){  
  9.         var typeCheckboxId="news_type_"+obj.result.types[i];  
  10.         var checkBoxType=Ext.getCmp(typeCheckboxId);  
  11.         checkBoxType.setValue(true);  
  12.     }  
  13. }  
调用
[javascript] view plaincopy
  1. newsAddWin.initFormData(config.getDataUrl,{id:id});  
系统会从第一个参数URL中用第二个param map去远程服务器获取一个obj数据对象。调用form的setFields进行填充，并且将id属性关联在该修改表单上。

AddOrEditWindow的实现如下：
[javascript] view plaincopy
  1. AddOrEditWindow = function(config, form) {  
  2.     config = config || {};  
  3.     var thiz = this;  
  4.     var params = {};  
  5.     var successCallback;  
  6.     var failureCallback;  
  7.     var formPanel = form;  
  8.     var sumitForm = function() {  
  9.         formPanel.getForm().submit({  
  10.             params : params,  
  11.             success : function(form, action) {  
  12.                 Ext.example.msg("提示", "操作成功");  
  13.                 if (successCallback) {  
  14.                     successCallback();  
  15.                 }  
  16.                 thiz.close();  
  17.             },  
  18.             failure : function(form, action) {  
  19.                 Ext.example.msg("提示", "操作失败");  
  20.                 if (failureCallback) {  
  21.                     failureCallback();  
  22.                 }  
  23.                 thiz.close();  
  24.             }  
  25.         });  
  26.     }  
  27.   
  28.     Ext.apply(config, {  
  29.         iconCls : 'icon_window',  
  30.         items : [ formPanel ],  
  31.         buttons : [ {  
  32.             xtype : 'button',  
  33.             text : '提交',  
  34.             iconCls : 'save',  
  35.             handler : function() {  
  36.                 sumitForm();  
  37.             }  
  38.         }, {  
  39.             xtype : 'button',  
  40.             text : '关闭',  
  41.             iconCls : 'delete',  
  42.             handler : function() {  
  43.                 thiz.close();  
  44.             }  
  45.         } ]  
  46.     });  
  47.     AddOrEditWindow.superclass.constructor.call(this, config);  
  48.   
  49.     this.setParams = function(ps) {  
  50.         Ext.apply(params, ps);  
  51.     }  
  52.   
  53.     this.initFormData = function(url, ps) {  
  54.         Ext.Ajax.request({  
  55.             url : url,  
  56.             params : ps,  
  57.             success : function(resp, options) {  
  58.                 var respText = Ext.util.JSON.decode(resp.responseText);  
  59.                 params.id = respText.result.id;  
  60.                 formPanel.setFields(respText);  
  61.             },  
  62.             failure : function(resp, options) {  
  63.                 thiz.close();  
  64.             }  
  65.         });  
  66.     }  
  67.   
  68.     this.setSuccessCallback = function(fn) {  
  69.         successCallback = fn;  
  70.     }  
  71.   
  72.     this.setFailureCallback = function(fn) {  
  73.         failureCallback = fn;  
  74.     }  
  75. };  
  76.   
  77. Ext.extend(AddOrEditWindow, Ext.Window, {});  


5.一些小技巧
给表格新增一个操作的列，如删除等等之类的。
[javascript] view plaincopy
  1.                                            {xtype:'actioncolumn',width:70,items:[{  
  2. icon: '../ext/selfimg/picture_delete.png',  
  3. tooltip:'删除封面',  
  4. handler:function(grid, rowIndex, colIndex){  
  5.     var rec = store.getAt(rowIndex);  
  6.     var id=rec.get("id");  
  7.      Ext.MessageBox.confirm("删除确认","确认是否删除?",function(btn){  
  8.   
  9.        }  
  10. });  
  11. }  
  12.   }]}  

type为：
[javascript] view plaincopy
  1. actioncolumn  


6.与Jquery成为一对好基友
有的时候，需要和jquery一起使用，只需引入jquery的适配器。
[html] view plaincopy
  1. <script type="text/javascript" src="../ext/jquery-1.4.2.min.js"></script>  
  2. <script type="text/javascript" src="../ext/ext-jquery-adapter.js"></script>  
  3. <script type="text/javascript" src="../ext/xheditor-1.1.9-zh-cn.min.js"></script>  
  4. <script type="text/javascript" src="../ext/ext-all.js"></script>  
  5. <script type="text/javascript" src="../ext/ext-lang-zh_CN.js"></script>   


如使用jquery的插件XKEditor编辑器。

[javascript] view plaincopy
  1. {xtype:'textarea',fieldLabel:'正文',id:'news_details_proxy',name:'news_details_proxy',height:400,anchor: '-20'}  

[javascript] view plaincopy
  1. editor=$('#news_details_proxy').xheditor({html5Upload:false,upLinkUrl:fileUploadUrl,upLinkExt:"zip,rar,txt",upImgUrl:fileUploadUrl,upImgExt:"jpg,jpeg,gif,png",upFlashUrl:fileUploadUrl,upFlashExt:"swf",upMediaUrl:fileUploadUrl,upMediaExt:"avi"});     

发现总是无法成功，textarea还是老样子。
原来是因为在表单render动态的新增了组件，嗲用了doLayout，
[javascript] view plaincopy
  1.                                    var renderNewsTypes=function(){  
  2. Ext.Ajax.request({  
  3.     url : '<%=request.getContextPath()%>/mvc?MVC_BUS=NewsTypes&MVC_ACTION=list',  
  4.     success : function(resp, options) {  
  5.         var respText = Ext.util.JSON.decode(resp.responseText);  
  6.         var types=respText.list;  
  7.         typesInited=true;  
  8.         for(var i=0;i<types.length;i++){  
  9.             typesCheckBoxes.push({xtype:'checkbox',boxLabel:types[i].type_name,inputValue:types[i].id,name:'news_type_'+types[i].id,id:'news_type_'+types[i].id});  
  10.         }  
  11.         thiz.get(0).insert(1,{fieldLabel:'新闻类型',xtype:"checkboxgroup",columns: 4,items:typesCheckBoxes,name:'news_type_group',id:'news_type_group'});  
  12.         thiz.get(0).remove(thiz.get(0).findById("news_types_proxy"));  
  13.         thiz.doLayout();          
  14.     },failure:function(){  
  15.         Ext.MessageBox.alert("警告","新闻内容拉取失败");  
  16.     }  
  17. });  


所以必须在每次layout后，重新将编辑器渲染一下：
[javascript] view plaincopy
  1. thiz.doLayout();  
  2. editor=$('#news_details_proxy').xheditor({html5Upload:false,upLinkUrl:fileUploadUrl,upLinkExt:"zip,rar,txt",upImgUrl:fileUploadUrl,upImgExt:"jpg,jpeg,gif,png",upFlashUrl:fileUploadUrl,upFlashExt:"swf",upMediaUrl:fileUploadUrl,upMediaExt:"avi"});                                     
  3.                                   

7.一些不解
当文件AJAX上传的时候，服务器返回数据必须显示指定；
response.setContentType()"text/html";否则判断为失败。
posted on 2012-07-02 14:49  鱼.明  阅读(385)  评论(0)    收藏  举报
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3