Extjs整体总结

 一、如何同步调用Ajax远程数据

[javascript]  view plain copy
  1. // 同步方式,API不直接提供,获取XHR的conn的引用即可  
  2. var url = "myApp/getUserList.do";  
  3. var conn = new Ext.data.Connection()conn;  
  4. conn.open("POST", url, false);  
  5. conn.send(null);  
  6. var json = Ext.decode(conn.responseText);  
  7. // 异步方式,这是常用的方式  
  8. new Ext.data.Connection().request({  
  9.     // 此即是Ext和Struts交互的关键  
  10.     url: 'myApp/getUserList.do',  
  11.     params: {id: 10001,name: '测试'},  
  12.     failure: requestFailed,  
  13.     success: requestSuccessful  
  14. }  

二、全局性、强制指定HTTP方法(动词)

[javascript]  view plain copy
  1. Ext.Ajax.on('beforerequest'function(){  
  2.     arguments[1].method = 'GET' // or 'POST'/'PUT'/'DELETE'  
  3. });    

三、怎么对form中的textfield赋值

[javascript]  view plain copy
  1. Ext.getCmp("TextField_id").setValue("value");    

四、布局一些已知的限制

'fit'的layout中items只能放一个子组件,即使放多个,也只会显示第一个。而且aotuHeight属性页不能和fit一起使用;'border'布局方式中,分为东西南北中五个region,其中center是自动计算大小的。而'south','north'只能设置高度,'west','east'只能设置宽度。 (by 佚名网友)

 

五、返回当前类的静态成员的另外一种方法:constructor.prototype

[javascript]  view plain copy
  1. /** 
  2.  * @class xyj.Controlller 
  3.  * A Model class represents and manages a tables in a database. 
  4.  * Model instances represent individual records in the table. 
  5.  * Models follow the ‘Active Record’ design pattern for object-relational mapping. 
  6.  */  
  7. xyj.data.Controlller = function(config){  
  8.     this.parents   = [];  
  9.     this.children  = [];      
  10.       
  11.     Object.apply(this, config);  
  12.       
  13.     Array.each(this.belongTo, this.assignElment, {scope:this, which: 0});  
  14.     Array.each(this.hasMany,  this.assignElment, {scope:this, which: 1});  
  15. };  
  16. xyj.data.Controlller.prototype = {  
  17.     /** 
  18.      *  
  19.      * 原本函数是这样的(this还是指当前实例): 
  20.      * <code> 
  21.     var _instancePrototype = this.constructor.prototype; 
  22.     Array.each(this.belongTo, function(i){ 
  23.         if (typeof i == 'string') { 
  24.             _instancePrototype.belongTo.call(this, i); 
  25.         } 
  26.         else  
  27.             if (NJS.Array.isArray(i)) { 
  28.                 _instancePrototype.belongTo.call(this, i[0], i[1]); 
  29.             } 
  30.     }, this); 
  31.      
  32.     Array.each(this.hasMany, function(i){ 
  33.         if (typeof i == 'string') { 
  34.             _instancePrototype.hasMany.call(this, i); 
  35.         } 
  36.         else  
  37.             if (NJS.Array.isArray(i)) { 
  38.                 _instancePrototype.hasMany.call(this, i[0], i[1]); 
  39.             } 
  40.     }, this); 
  41.     </code>  
  42.      * 当前,我们变成这样: 
  43.      * @param {} schema 
  44.      */  
  45.     assignElment : function(i){  
  46.         var _instancePrototype = this.scope.constructor.prototype;  
  47.         if (typeof i == 'string') {  
  48.             _instancePrototype[this.which?'hasMany':'belongTo'].call(  
  49.                 this.scope, i  
  50.             );  
  51.         }else if(Array.isArray(i)) {  
  52.             _instancePrototype[this.which?'hasMany':'belongTo'].call(  
  53.                 this.scope, i[0], i[1]  
  54.             );  
  55.         }  
  56.     }  
  57. }    

六、GridPanel如何加上自动的顺序号? 
制定一个列Column对象:new Ext.grid.RowNumberer()

 

七、如何在树Tree or Grid表格中添加CheckBox呢?

For Grid:

 

[javascript]  view plain copy
  1. var sm = new Ext.grid.CheckboxSelectionModel();  
  2. var cm = new Ext.grid.ColumnModel([     
  3.     …,  
  4.     sm, // 添加的地方  
  5.     …                  
  6. ]);  

For Tree:

 

八、EXT怎么给IMAGE或者DIV控件加右键菜单

[javascript]  view plain copy
  1. <script src="ext-core.js"></script>  
  2. <img id="foo" src="https://p-blog.csdn.net/images/p_blog_csdn_net/zhangxin09/EntryImages/20091109/book_10.gif" />  
  3. <script>  
  4. Ext.onReady(function(){  
  5.     Ext.fly('foo').on('contextmenu'function(){alert('你右击了一下图片')})  
  6. });  
  7. </script>  

注意:那个ext-core.js要引入上

 

九、手动触发浏览器事件 ,IE与FF有别:

[javascript]  view plain copy
  1. // No way to get the event of 'submit' on FF,   
  2. //uses 'οnsubmit="return false;' in HTML insteaed!  
  3. function doSubmit(e, el){  
  4.     if(e.browserEvent.type =='submit'){  
  5.          IE caught OK!  
  6.     };   
  7.     if (Ext.isIE)   
  8.         el.fireEvent('onsubmit');  
  9.     else {  
  10.         var e = document.createEvent("Events");  
  11.         e.initEvent("submit"truetrue);  
  12.         el.dispatchEvent(e);  
  13.     }  
  14. }  

注意不是submit()的执行方法,而是触发、分发事件,有一定区别。

 

十、如何选取Grid的数据记录? 行选择模式的话,将是:

[javascript]  view plain copy
  1. var rowcount = grid.getSelectionNode().getSelections();  

可以获取全部选中的记录,得到的rowcount将是一个Array,比如想获取sex列的数据,语句如下:
[javascript]  view plain copy
  1. var strsex = rowcount[i].get(‘sex’);  

十一、Grid单元格选取模式

如果在GridPanel的配置属性增加sm属性如下,则就是“单元格选择模式”:

[javascript]  view plain copy
  1. sm: new Ext.grid.CellSelectionModel();  

当单击时将选中对应的某一个单元格,而不是默认的选择某一行。选择方式如下:
[javascript]  view plain copy
  1. var cell = grid.getSelectionNode().getSelectedCell();  

得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据:
[javascript]  view plain copy
  1. var colname = grid.getColumnModel().getDataIndex(cell[1]);  //获取列名  
  2. var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据  
  3. getStore():获取表格的数据集  
  4. getAt():获取该数据集cell[0]行  
  5. get():获取该行colname的数据  

十二、Tree节点的拖放。 重写beforeNodeDrop/nodeDrop函数

[javascript]  view plain copy
  1. Client.Tree.UI = Ext.extend(Ext.tree.TreePanel, {  
  2.     beforeNodeDrop: function(e){  
  3.         var s = e.data.selections, r = [];  
  4.         for (var i = 0, len = s.length; i < len; i++) {  
  5.             var ticket = s[i].data.ID; // s[i] is a Record from the grid  
  6.             if (!e.target.findChild('ID', ticket)) { // <-- filter duplicates  
  7.                 r.push(new Ext.tree.TreeNode({ // build array of TreeNodes to add  
  8.                     allowDrop: false,  
  9.                     text: 'Ticket #' + ticket,  
  10.                     ticket: ticket,  
  11.                     action: 'view'  
  12.                   //qtip: String.format('<b>{0}</b><br />{1}', s[i].data.summary, s[i].data.excerpt)  
  13.                 }));  
  14.             }  
  15.         }  
  16.         e.dropNode = r; // return the new nodes to the Tree DD  
  17.         e.cancel = r.length < 1; // cancel if all nodes were duplicates  
  18.     },  
  19.     nodeDrop: function(e){  
  20.         //      watchList.setText(String.format('My Watch List ({0})', watchList.childNodes.length));  
  21.         //      storeWatchList goes here;  
  22.     }  
  23. });   

十三、Grid被拖动过程中, 修改提示文字。 重写getDragDropText函数

[javascript]  view plain copy
  1. getDragDropText: function(){  
  2.         var s = this.getSelectionModel().getSelections();  
  3.         if (s.length == 1) {  
  4.             return String.format('<b><h6>You are now dragging </h6> #{0}<b>', s[0].data.ID);  
  5.         }  
  6.         else {  
  7.             var tickets = [];  
  8.             for (var i = 0, len = s.length; i < len; i++) {  
  9.                 tickets.push('#' + s[i].data.ID);  
  10.             }  
  11.             return String.format('<b><h6>You are now dragging the {0} selected</h6> </b>{1}', s.length, tickets.join(', '));  
  12.         }  
  13. }  

 

十四、 用Ext Core插入Flash到页面。 只需要这个小小的函数:

[javascript]  view plain copy
  1.     /** 
  2.      * 插入Flash电影文件到页面。原本Robert Nyman的是用字符串拼凑的,现改为JSON2HTML。 
  3.      * 例子:(在插入的地方)<mce:script type="text/javascript"><!-- 
  4. Edk.setFlash({src:'images/ani.swf'}); 
  5. // --></mce:script> 
  6.      * @param {Object} config 配置参数 
  7.      * @cfg {String} src    Flash电影的文件路径(SWF) 
  8.      * @cfg {String} id     Flash电影元素的id(可选的) 
  9.      * @cfg {Nubmer} width  Flash电影的宽度(可选的) 
  10.      * @cfg {Nubmer} height Flash电影的高度(可选的) 
  11.      * @cfg {Object} params 参数(可选的) 
  12.      * credit: Robert Nyman,  http://code.google.com/p/flashreplace/ 
  13.      */  
  14.     function setFlash (config){  
  15.         /** 
  16.          * 检测Flash是否安装 
  17.          * @param {Number} version  
  18.          * @return {Boolean} True表示已安装符合版本要求的Flash 
  19.          */   
  20.         function checkForFlash (version){  
  21.             if(Ext.isIE){  
  22.                 try{  
  23.                     new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + version);  
  24.                     return true;  
  25.                 }catch(e){  
  26.                     return false;  
  27.                 }  
  28.             }else{  
  29.                 var _plugins = navigator.plugins;  
  30.                 if( _plugins && navigator.mimeTypes.length > 0){  
  31.                     if(_plugins["Shockwave Flash"] && _plugins["Shockwave Flash"]['description'].replace(/.*/s(/d+/./d+).*/, "$1") >= version)  
  32.                     {  
  33.                         return true;  
  34.                     }  
  35.                 }else{  
  36.                     return false;  
  37.                 }  
  38.                   
  39.             }  
  40.         }         
  41.         if(!checkForFlash(config.version || 7 /*defaultFlashVersion*/)){  
  42.             throw 'Flash is NOT Readly!';  
  43.         }  
  44.         var children = [  
  45.             {  
  46.                  tag   : 'param'  
  47.                 ,name  : 'movie'  
  48.                 ,value : config.src  
  49.             }  
  50.             ,{  
  51.                  tag   : 'embed'  
  52.                 ,type  : "application/x-shockwave-flash"  
  53.                 ,src   : config.src  
  54.                 ,width : config.width  
  55.                 ,height: config.height  
  56.             }  
  57.         ];  
  58.         var _params = config.params;  
  59.         if(_params){  
  60.             for(var i in _params){  
  61.                 children.push({  
  62.                      tag  :  'param'  
  63.                     ,name :  i  
  64.                     ,value:  _params[i]  
  65.                 });  
  66.             }  
  67.         }  
  68.       
  69.         Ext.fly(config.el).createChild(Object.apply({  
  70.              tag      : 'object'  
  71.             ,classid  : "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  
  72.             ,data     : config.src  
  73.             ,children : children  
  74.         }, config));  
  75.     }  

十五、为HTMLEditor加入“插入图片”按钮。 如图:

 

使用以下插件

[javascript]  view plain copy
  1. /** 
  2.  * http://extjs.com/forum/showthread.php?p=128146#post128146 
  3.  * @param {Object} config 
  4.  */  
  5. Ext.ux.HtmlEditorImageInsert = function(config){  
  6.     Ext.apply(this, config);  
  7. }  
  8. Ext.ux.HtmlEditorImageInsert.prototype = {  
  9.     popTitle: '插入图片',  
  10.     popMsg: '请粘贴你要插入图片的地址',  
  11.     popWidth: 350,  
  12.     popValue:  '',  
  13.     init:function(htmlEditor){  
  14.         this.editor = htmlEditor;  
  15.         this.editor.on('render'this.onRender, this);  
  16.     },  
  17.     onRender:function(){  
  18.         if (!Ext.isSafari) {  
  19.             this.editor.tb.add({  
  20.                 itemId: 'htmlEditorImage',  
  21.                 iconCls: 'icon16-Ext-ux-HtmlEditorImageInsert',  
  22.                 enableToggle: false,  
  23.                 scope: this,  
  24.                 handler:  function(){  
  25.                     Ext.MessageBox.show({  
  26.                         title: this.popTitle,  
  27.                         msg: this.popMsg,  
  28.                         width: this.popWidth,  
  29.                         buttons: Ext.MessageBox.OKCANCEL,  
  30.                         prompt: true,  
  31.                         value: this.popValue,  
  32.                         scope: this,  
  33.                         fn: function(btn, text){  
  34.                             //@todo 验证url地址  
  35.                             if (btn == 'ok')   
  36.                                 this.editor.relayCmd('insertimage', text);  
  37.                         }  
  38.                     });  
  39.                 },  
  40.                 clickEvent: 'mousedown',  
  41.                 tabIndex: -1  
  42.             });  
  43.         }  
  44.     }  
  45. }  

用法如下:

[javascript]  view plain copy
  1. var htmlEditor = new Ext.form.HtmlEditor({  
  2.                      plugins  : new Ext.ux.HtmlEditorImageInsert  
  3.                     ,applyTo  : this.formEl.child('textarea.edk-htmlEditor')  
  4.                 });  

十六、FireFox中文字体问题

不少朋友加载汉化包之后,可全面实现中文的操作环境。但是有一点美中不足的是在FireFox浏览器下面会出现字体失真的问题,其现象如图。要解决这个问题,可从覆盖CSS文件、修正原CSS规则定义。

 

[css]  view plain copy
  1. /* Ext中文字体修正补丁。须客户端上安装Pmingliu繁体字体*/  
  2. .x-toolbar label, .x-toolbar div.xtb-text{  
  3.     font-size:9pt;  
  4. }  
  5. .x-window-footer {  
  6.     positionrelative;  
  7.     top: 0;  
  8.     right: 0;  
  9. }  
  10. .x-tab-strip SPAN.x-tab-strip-text {  
  11.     font-size12px;  
  12. }  
  13. .x-panel-header {  
  14.     font-size12px;  
  15. }  
  16. .x-tree-node {  
  17.     font-size12px;  
  18. }  
  19. .x-grid3-hd-row TD {  
  20.     font-size12px;  
  21. }  
  22. .x-grid3-row TD {  
  23.     font-size12px;  
  24.     LINE-HEIGHT: 16px;  
  25. }  
  26. .x-tip .x-tip-bd {  
  27.     font-size12px;  
  28. }  
  29. .x-tip h3 {  
  30.     font-size12px;  
  31. }  
  32. .x-tip .x-tip-bd-inner {  
  33.     font-size12px;  
  34. }  
  35. .x-panel-tl .x-panel-header {  
  36.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  37.     font-size12px;  
  38. }  
  39. .x-form-field {  
  40.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  41.     font-size12px;  
  42. }  
  43. .x-small-editor .x-form-field {  
  44.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  45.     font-size12px;  
  46. }  
  47. .x-combo-list-item {  
  48.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  49.     font-size12px;  
  50. }  
  51. .x-menu-list-item {  
  52.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  53.     font-size12px;  
  54. }  
  55. .x-window-tl .x-window-header {  
  56.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  57.     font-size12px;  
  58. }  
  59. .x-layout-split-west .x-layout-mini {  
  60.     BACKGROUND-IMAGE: url(../images/mini-left.jpg);  
  61. }  
  62. .ext-ie .x-form-text {  
  63.     margin-top1px;  
  64. }  
  65. /* the textField missing bottom line*/  
  66. .x-form-item {  
  67.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  68.     font-size12px;  
  69. }  
  70. .x-grid-group-hd DIV {  
  71.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  72.     font-size12px;  
  73. }  
  74. .x-btn-text-icon .x-btn-center .x-btn-text {  
  75.     background-position0pt 2px;  
  76.     background-repeatno-repeat;  
  77.     padding3px 0pt 2px 18px;  
  78. }  
  79. .ext-gecko .x-btn button {  
  80.     padding-left0pt;  
  81.     padding-right0pt;  
  82. }  
  83. .x-btn button {  
  84.     font-family: Pmingliu,Verdana,Geneva,Arial,Helvetica,sans-serif;  
  85.     font-size12px;  
  86. }  
  87. /* -------End-----Ext 2.0 中文字体修正补丁。须客户端上安装Pmingliu繁体字体-----*/  

十七、可靠地判别Array类型。 
有时候用typeof/instanceof/constructor在某些浏览器上不能通过。因此我们使用另外一种方法来判断对象是否为数组。

[javascript]  view plain copy
  1. /** 
  2.  * @param {any} o 被检测的对象 
  3.  * @return {boolean} 是否为数组 
  4.  */  
  5. function isArray(o) {  
  6.     o = o.length || 0; // dummy  
  7.     return typeof o === 'number' && isFinite(o) && (/^/d+$/).test(o.valueOf()) && typeof(o.splice) == 'function';  
  8. }   

十八、判断该值是否为一个合法的数字

Ext里面也有Ext.isArray;这个是来自YUI的

[javascript]  view plain copy
  1. /** 
  2.  * @credit YUI 
  3.  * @param  {any} o 被检测的值 
  4.  * @return {boolean} 结果 
  5.  */  
  6. function isNumber(o) {  
  7.     return typeof o === 'number' && isFinite(o) && (/^/d+$/).test(o.valueOf());  
  8. }  

十九、删除某个树节点下面的所有节点

[javascript]  view plain copy
  1. while(node.firstChild) {  
  2.     node.removeChild(node.firstChild);  
  3. }  

二十、如何获取Grid记录集合

[javascript]  view plain copy
  1. grid.getSelectionModel().getSelections()// 会得到选择到的数据,以行为单位,作为数组返回。   

这个其实前面都有说的了,遍历里Grid数据又是怎么来着?遍历Grid就是遍历Store:

[javascript]  view plain copy
  1. grid.getStore().data.each(function(){}); // store.data数据集合,each()是遍历的方法  

二十一、grid可以自动排列每列的宽度

[javascript]  view plain copy
  1. viewConfig{forceFit:true}  

二十二、简单实现多语言界面(i18n in JS)

翻译界面语言的话,推荐将所有翻译文本作为公共类的成员出现,重写原先类的prototype的属性,也就是使用Ext.override(),如下例:

[javascript]  view plain copy
  1. /** 
  2.  * 斯洛伐克语版的教程之本地化文件 
  3.  */  
  4. if(Tutorial.LocalizationWin) {  
  5.     Ext.override(Tutorial.LocalizationWin, {  
  6.          titleText:'Príklad lokalizácie'  
  7.         ,selectLangText:'Zvoľ jazyk'  
  8.         ,textFieldText:'Textové pole'  
  9.         ,dateFieldText:'Dátumové pole'  
  10.     });  
  11. }  

二十三、Ext拖拽小解

DragDrop 是一个基类,它定义了一些可以被拖拽的元素的接口和基本操作,如 startDrag, onDrag, onDragOver 和 onDragOut 等 Drag 事件。而继承自这个类的子类,功能上主要分为两类。一个是可以使得对象被拖动;一个是使得拖动对象可以被放置在 DropTarget 中。

  • DD 类:用户可以通过调用 DD 的构造函数来使得对象能够被拖动。这种拖动使得对象会跟随鼠标的移动而移动。
  • DDProxy 类:DDProxy 类继承自 DD 类。使用这个类来构造被拖动的对象时,该对象的边框会跟随鼠标的移动而移动。而等到鼠标释放时,该对象会被重新放置到鼠标停止的位置。
  • DDTarget 类:拖动对象可以被放置在其他DDTarget中,然后,DragTarget 继承自 DDTarget。将元素作为参数传递到 DDTarget 中,那么这个元素就可以是一个 Drop Target 。

要点: 
第一, 只有 Drag 元素和 DropTarget 元素具有同样 DragDropGroup 名字的,Drag 元素才能够被拖放到正确的 DropTarget 元素中去。
第二, 在 DragTarget 中,还需要实现 notifyDrop(DragSource source, EventObject e, DragData data) 方法以实现拖动后的效果,例如可实现从当前 Tree 中删除选中节点和在 Grid 中增加记录的操作。notifyDrop()中,source 是指可以被拖动到 DropTarget 上的元素; e 是指当前的事件; data 是指被拖动元素所包含的数据对象。

二十四、实现Ext表单对checkBoxGroup的统一管理

对于类型是checkboxgroup的数据,数据库中保存数据的格式是value1,value2...valueN,其中1~N的数据有可能不存在,如果选中则存在,最后拼接成一个串。为了适应我们采用的数据格式,对于该组件的setValue(被setValues调用)和getValue(获取到已加工的数据,此事后话)也要进行重写。故而对于形如:

[javascript]  view plain copy
  1. {    
  2.    xtype: 'checkboxgroup',  
  3.    name: 'biztype',    
  4.    width: 220,  
  5.    columns: 3,  
  6.    fieldLabel: '业务类别',  
  7.    items: [    
  8.        {boxLabel: '类别1', inputValue: '01'},    
  9.        {boxLabel: '类别2', inputValue: '02'},    
  10.        {boxLabel: '类别3', inputValue: '03'},    
  11.        {boxLabel: '类别4', inputValue: '04'}    
  12. }  

的checkboxgroup定义,需重写类如下:

[javascript]  view plain copy
  1. Ext.override(Ext.form.CheckboxGroup,{   
  2.     //在inputValue中找到定义的内容后,设置到items里的各个checkbox中   
  3.     setValue : function(value){  
  4.         this.items.each(function(f){  
  5.             if(value.indexOf(f.inputValue) != -1){  
  6.                 f.setValue(true);  
  7.             }else{  
  8.                 f.setValue(false);  
  9.             }  
  10.         });  
  11.     },  
  12.     //以value1,value2的形式拼接group内的值  
  13.     getValue : function(){  
  14.         var re = "";  
  15.         this.items.each(function(f){  
  16.             if(f.getValue() == true){  
  17.                 re += f.inputValue + ",";  
  18.             }  
  19.         });  
  20.         return re.substr(0,re.length - 1);  
  21.     },  
  22.     //在Field类中定义的getName方法不符合CheckBoxGroup中默认的定义,因此需要重写该方法使其可以被BasicForm找到  
  23.     getName : function(){  
  24.         return this.name;  
  25.     }  
  26. });  

这个方法同样适用于上面定义的checkboxgroup,如此就可以把前后台的数据通过json统一起来了。

二十五、如何添加/删除表格的某几列

参见官方论坛 。

 

二十六、两个Panel一个放上面,一个放下面,怎么写

经典方法:可以用broder一个south 另外一个center;

其他方法:表单布局layout:'from'的话,放两个panel也可以到达上下排列

 

二十六、Grid加装数据超时

解决方法就是修改默认的XHR通讯请求时间。修改Grid的就是修改Store的HttpProxy:

[javascript]  view plain copy
  1. var myBigTimeout = 90000; // 90 sec  
  2. myStore =  new Ext.data.JsonStore({  
  3.   proxy: new Ext.data.HttpProxy({   
  4.               url: "http://www.example.com/test.php",  
  5.               timeout: myBigTimeout   
  6.          }),  
  7. //url: "http://www.example.com/test.php",  
  8.   ...  
  9. });  

Thanks to 沉默 。

二十七、如何调出自带的consloe

旧版的是console.log();3.0中Consloe有更新,调用方法:Ext.log()。如图:

二十八、JavaScript中的“负负得正”

Rocky 16:48:37 
Opera:  !!window.opera, 这样写的原因谁知道?
一夕 16:52:15 
测试window.opera方法或属性是否可用 
Rocky 16:52:31 
我是说 为什么前面要两个!
一夕 16:53:22 
因为window.opera返回的值不一定的BOOLEAN的,这样的话就不用担心这个了 
Rocky 16:53:25 
我知道了 是为了保证 该变量的 boolean  类型

二十九、Ext.get()方法和document.getElementById()有什么区别?

我在使用Ext.get()方法时,发现与document.getElementById不完全一样,如
var myDiv=Ext.get('my_Div')如果修改myDiv的innerHTML时必须加上myDiv.dom.innerHTML,如果用getElementById的话直接用myDiv.innerHTML就可以,这是为什么?
Ext.get()得到的是一个Element对象,要变为一般的Dom对象要调用它的Dom属性。

document.getElementById()和Ext.getDom()一样
Ext.get()只是得到Ext的对象

三十、ext精华函数解析(仅个人见解)

  • One:    Ext的最先开始的精华函数要算Ext.namespace,它采取的是命名空间的方式.从而可以避免各种变量啊.对象的冲突问题
  • Two:    Ext的apply采取的是对象继承方式,Ext.apply(o,c,object),既o继承c的所有属性.并且o也拥有object的一切属性
  • Three   Ext的applyIf采取的对象继承方式,这个跟上面的继承有一点不同,Ext.applyIf(o,c)就是只有当o里的对象不存在时才继承.反之就不继承.
  • Four:   Ext的extend,这个也是整个Ext的精华所在,所有的对象继承,扩展都是根据Ext.extend的方法而来.本人写的一个htmlEditor也才是看懂了extend方法才搞清楚如何写扩展.

三十一、Ext.onReady 这个是不是很关键

页面上所有的元素(DOM树)加载完毕(浏览器loading/parse完成,将dom树加载好的内存中去)

三十二、parseInt()注意/建議事項

使用parseInt將字串轉換成數字時,最好使用有兩個參數的版本,明確指定字串所表達數字是幾進位的。否則的話會出現 parseInt("08") ==> 0,只有parseInt("08", 10)能正確轉換成8。

三十三、Fn.createDelegate()的作用

createDelegate()只限于函数类型的对象所使用。createDelegate()的作用,简单一点的说就是做一件本来不能做到的事情。当然自己无力完成所以委托给别人来做,我们再来看看简单的应用,演示如下:

[javascript]  view plain copy
  1. Ext.onReady(function(){  
  2.     Ext.QuickTips.init()  
  3.     var myclass=new Object();  
  4.     // myclass并没有alert方法,我们也不打算为它写一个alert方法。我们希望它和window.alert有一样的行为,所以我们委托window来做  
  5.     myclass.alert=window.alert.createDelegate(window);  
  6.     // 我们还希望他有个更漂亮的show方法和Ext.MessageBox的show功能一样,所以我们又得委托给Ext.MessageBox来做这事了  
  7.     myclass.show=Ext.MessageBox.show.createDelegate(Ext.MessageBox);  
  8.     // 我们的myclass也有alert和show方法了  
  9.     myclass.alert('alert1');  
  10.     myclass.show({title:'title',msg:'message'});  
  11. });  

看看 createCallback/createDelegate源码的实现,核心的都只有一句return method.apply(window, args);和 return method.apply(obj || window, callArgs);

三十四、ExtJS,框架乎?类库乎?

这段时间,笔者一直在学习和分析ExtJS的源代码,跟着Jack的思绪感悟了一把牛人的设计风格。同时,自己也在思考一个问题,Ext到底是什么?框架?类库?我们先来看看框架和类库的概念吧!框架一般来说是满足某种领域需求的半成品,一般都提供了扩展点给用户定制开发自己的需求代码,所以从宏观上来说,是有框架来调用用户所提供的定制code。而类库则不同,caller调用者主要是用户代码,类库通过其所提供的API来暴露出其功能性接口,以便供用户代码调用,类库代码为callee,即被调用者。Ext作者的将其定位为派生UI组件的引擎,所以应该是可以看做是框架。

三十五、如果有大量的ComboBox记录,欲对其分页,如何实现?

设置pageSize>0即可。pageSize 如果值大于0,则在下拉列表的底部显示一个分页工具条,并且在执行过滤查询时将传递起始页和限制参数。注意:只在 mode = 'remote'时生效(默认为 0)。请实时的参考例子 。例子如图:

 

三十六、iFrame在IE与FF中的区别

原来在FF中IFRAME的“document”不叫document,改名叫contentDocument, "window"改名叫contentWindow,这就是区别了。

三十七、Ext 3.2中关于背景图片的改进

一个小小的应用,却意想不到地看出作者十分高明的安排,这儿所说的便是Ext背景图片的源地址使用上了base64编码的图片inline形式。FF/Opera等一批自然铁杆支持base64,而IE8或以上支持了base64内嵌图片了,于是排除了Ext.isIE6 || Ext.isIE7 || Ext.isAir就可以顺当地使用base64图片。这不~还给省下了s.gif的HTTP请求。再细想一想,拿了什么好处!?虽然看似不起眼的1x1 pix的透明背景图,只有1KB不到大小,——经过此番节省下来,按其影响来说,为低碳、为节能、为免掉多余的HTTP头字节^_^……莫不是功德无量!?

[javascript]  view plain copy
  1. BLANK_IMAGE_URL : Ext.isIE6 || Ext.isIE7 || Ext.isAir ?  
  2.                     'http:/' + '/extjs.com/s.gif' :  
  3.                     'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',  

三十八、如何Ext DataView分页+过滤+查询

文章 by Neeke。

三十九、如何使 DataView自身分页

如图,by Neeke。

 

在DataView的render事件中调用如下函数:

[javascript]  view plain copy
  1. function onDataViewRender(v){  
  2.   //创建拖拽对象  
  3.   var dd = new Ext.dd.DragDrop(v.el);  
  4.   //存储被拖拽的节点  
  5.   var dragData = null;  
  6.   dd.onMouseDown = function(e) {  
  7.           var t,idx,record;  
  8.           try {  
  9.               t = e.getTarget(v.itemSelector);  
  10.               idx = v.indexOf(t);  
  11.               record = v.getStore().getAt(idx);  
  12.               // Found a record to move  
  13.               if (t &amp;&amp; record) {  
  14.                   dragData = {  
  15.                       origIdx : idx,  
  16.                       lastIdx : idx,  
  17.                       record  : record  
  18.                   };  
  19.                   return true;  
  20.               }  
  21.           } catch (ex) { dragData = null; }  
  22.           return false;  
  23.       },  
  24.   //开始拖拽  
  25.   dd.startDrag = function(x, y) {  
  26.       if (!dragData) { return false; }  
  27.       Ext.fly(v.getNode(dragData.origIdx)).addClass('thumb');  
  28.       v.el.addClass('thumb-wrap-selected');  
  29.   },  
  30.   //结束拖拽  
  31.   dd.endDrag = function(e) {  
  32.       if (!dragData) { return true; }  
  33.       Ext.fly(v.getNode(dragData.lastIdx)).removeClass('thumb');  
  34.       v.el.removeClass('thumb-wrap-selected');  
  35.       return true;  
  36.   },  
  37.   dd.onDrag = function(e) {  
  38.       var t,idx,record,data = dragData;  
  39.       if (!data) { return false; }  
  40.       try {  
  41.           t = e.getTarget(v.itemSelector);  
  42.           idx = v.indexOf(t);  
  43.           record = v.getStore().getAt(idx);  
  44.           if (idx === data.lastIdx) { return true; }  
  45.           //将数据插入到新的位置  
  46.           if (t &amp;&amp; record) {  
  47.               data.lastIdx = idx;  
  48.               v.getStore().remove(data.record);  
  49.               v.getStore().insert(idx, [data.record]);  
  50.               Ext.fly(v.getNode(idx)).addClass('thumb');  
  51.               return true;  
  52.           }  
  53.       } catch (ex) { return false; }  
  54.       return false;  
  55.   }  
  56. }  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值