如何理解Ext JS控件的擴(kuò)展

如何理解Ext JS控件的擴(kuò)展，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

Ext JS是一種強(qiáng)大的JavaScript庫(kù)，可以用來開發(fā)RIA(Rich Internet Applications)，也即富客戶端的Ajax應(yīng)用，是一個(gè)與后臺(tái)技術(shù)無關(guān)的前端Ajax框架。

Ext JS最開始基于YUI(Yahoo!UserInterfaceLibrary)技術(shù)，由開發(fā)人員JackSlocum開發(fā)，通過參考JavaSwing等機(jī)制來組織可視化組件，無論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一個(gè)非常優(yōu)秀的Web開發(fā)框架。

對(duì)于大多數(shù)程序員來說，我們沒有任何美術(shù)功底，公司的很多項(xiàng)目也沒有配備美工，要想開發(fā)吸引人眼球的用戶界面，一直以來不是一件容易的事情。但是Ext的出現(xiàn)使得開發(fā)美觀的界面變得容易，Ext提供了表格、樹、布局、按鈕等很多外觀絢麗、功能強(qiáng)大的控件，為我們的日常開發(fā)工作節(jié)約了大量的時(shí)間和精力。更重要的是這個(gè)框架是完全面向?qū)ο笄铱蓴U(kuò)展的，通過對(duì)現(xiàn)有的庫(kù)的功能進(jìn)行修改或加入新的功能，來實(shí)現(xiàn)Ext框架中沒有的功能。

擴(kuò)展Ext組件

擴(kuò)展(extension)在Ext中就是指衍生的子類。假設(shè)我們已經(jīng)有一個(gè)附有一些方法的基類，現(xiàn)在欲加入新方法。我們可以利用框架的繼承特性和JavaScript創(chuàng)建新類的語(yǔ)言特性組合新的一個(gè)類。

Ext提供了這樣的一個(gè)實(shí)用函數(shù)Ext.extend在Ext框架中實(shí)現(xiàn)類繼承的機(jī)制。這賦予了擴(kuò)展任何JavaScript基類的能力，而無須對(duì)類自身進(jìn)行代碼的修改，擴(kuò)展Ext組件這是個(gè)較理想的方法。

要從一個(gè)現(xiàn)有的類創(chuàng)建出一個(gè)新類，首先要通過一個(gè)函數(shù)聲明新類的構(gòu)造器，然后調(diào)用新類屬性所共享的擴(kuò)展方法。這些共享的屬性通常是方法，但是如果要在實(shí)例之間共享數(shù)據(jù)，應(yīng)該也一同聲明。

JavaScript并沒有提供一個(gè)自動(dòng)的調(diào)用父類構(gòu)造器的機(jī)制，所以必須通過屬性superclass在構(gòu)造器中顯式調(diào)用父類。***個(gè)參數(shù)總是this，以保證構(gòu)造器工作在調(diào)用函數(shù)的作用域。

清單1.擴(kuò)展Ext組件的基本方法        MyNewClass=function(arg1,arg2,etc){  //顯式調(diào)用父類的構(gòu)造函數(shù)  MyNewClass.superclass.constructor.call(this,arg1,arg2,etc);  };  Ext.extend(MyNewClass,SomeBaseClass,{  myNewFn1:function(){  //etc.  },  myNewFn2:function(){  //etc.  }  });

使用時(shí)，我們需要實(shí)例化對(duì)象：

清單2.實(shí)例化新的組件對(duì)象        varmyObject=newMyNewClass(arg1,arg2,etc);

掌握了擴(kuò)展Ext組件的基本方法之后，我們就可以隨意構(gòu)造滿足特定需求的組件。然而Ext里已有的組件和示例永遠(yuǎn)是我們?nèi)≈槐M，用之不竭的創(chuàng)造源泉。本文以三個(gè)Ext組件為基礎(chǔ)，“嫁接”了其他組件的功能，形成三個(gè)新的組件，實(shí)現(xiàn)了現(xiàn)有Ext組件沒有的功能。本文的目的，旨在拋磚引玉，希望能給初學(xué)Ext的同仁們一點(diǎn)啟發(fā)和參考，開發(fā)出更多、功能更強(qiáng)大的組件。

移Property Grid之花接EditorGrid之木

首先，介紹一下我們的場(chǎng)景和實(shí)際需求。某大學(xué)要建設(shè)一個(gè)教職工科研基金的管理系統(tǒng)，該系統(tǒng)可供基金設(shè)置人員設(shè)置基金申請(qǐng)條件、發(fā)放步驟等，申請(qǐng)人員填報(bào)申請(qǐng)人信息、申領(lǐng)基金等。這里以構(gòu)建一個(gè)基金申請(qǐng)條件的組件為例。條件制定人員在制定申請(qǐng)條件時(shí)，可以隨意添加、刪除申請(qǐng)條件；對(duì)于某些申請(qǐng)條件，比如院系、性別等要求系統(tǒng)能提供預(yù)先定義好的選項(xiàng)供條件制定人員選擇，而對(duì)于比如特長(zhǎng)、年齡等內(nèi)容不明確的或者選項(xiàng)過多無法列舉的情況，則直接提供輸入框供條件制定人員輸入。

為了用Ext構(gòu)建這樣的組件，我們首先想到的是選用EditorGrid組件或者Property Grid組件。EditorGrid（可編輯表格控件）擴(kuò)展自GridPanel，提供對(duì)于選中列的單元格編輯?？删庉嫷牧惺峭ㄟ^在表示表格的列信息的類Ext.grid.ColumnModel中添加editor來實(shí)現(xiàn)的。但是這個(gè)editor是對(duì)整個(gè)列有效的，就是說每一行在該列的位置的數(shù)據(jù)的編輯器是一樣的。

Property Grid(屬性表格)擴(kuò)展自EditorGridPanel，所以可以直接編輯右邊屬性值部分的內(nèi)容。但是，只是右邊的，即使你單擊左邊的單元格，編輯器也只會(huì)出現(xiàn)在右邊。實(shí)際上，我們可以用散列表來形容Property Grid，左邊可以看作key，右邊的是value。key是由我們指定好的，用戶只需要修改對(duì)應(yīng)的value即可。

Property Grid默認(rèn)的編輯器包括TextField、DateField、NumberField和ComboBox，也就只能處理數(shù)字、字符串的輸入和日期的選擇，布爾值的選擇等一般的情況。當(dāng)我們想對(duì)編輯器進(jìn)行更詳細(xì)的配置時(shí)，就需要用到Property Grid的customEditors，為指定id的那行數(shù)據(jù)設(shè)置對(duì)應(yīng)的編輯器。customEditors和source的設(shè)置基本一樣，只需要將兩者的屬性名稱對(duì)應(yīng)起來，并且為customEditors里的所有屬性指定一個(gè)editor。

Property Grid雖然能夠給不同的單元格定制不同的編輯器，但是一方面這種表格只有兩列，***列還不可編輯，而且表格的內(nèi)容（source）需要事先確定；另一方面定義customEditors的時(shí)候必須知道表格的內(nèi)容（source），而且必須將兩者的屬性名稱對(duì)應(yīng)起來。EditorGrid其實(shí)已經(jīng)大部分滿足了我們的需求，只是不能對(duì)每個(gè)單元格定制編輯器，只能指定列編輯器。

經(jīng)過上面的分析，單純的使用任何一個(gè)控件，都難以達(dá)到我們的目的。同時(shí)我們發(fā)現(xiàn)問題主要出在EditorGrid的列模式（ColumnModel）上，Property Grid就是擴(kuò)展自EditorGrid，通過對(duì)其ColumnModel的擴(kuò)展來支持單元格的編輯器。所以我們嘗試把EditorGrid的ColumnModel擴(kuò)展一下，使得新的ColumnModel支持customEditors，這樣我們就獲得了對(duì)編輯器的完全控制權(quán)，可以根據(jù)表格的內(nèi)容動(dòng)態(tài)的改變單元格的編輯器了。清單3是我們?yōu)闈M足上述需求而擴(kuò)展的新類MyColumnModel的部分代碼，清單4是使用MyColumnModel構(gòu)造了一個(gè)EditorGrid作為基金申請(qǐng)條件組件。

清單3.定義新類MyColumnModel        Ext.ns('Ext.ux.grid');  //新類MyColumnModel的構(gòu)造函數(shù)  Ext.ux.grid.MyColumnModel=function(grid,store,column){  this.grid=grid;  this.store=store;   vargender=[  ['0100','男'],  ['0101','女']  ];  vardepartment=[  ['0200','文學(xué)院'],  //省略部分代碼  ['0207','醫(yī)學(xué)部']  ];  vartitle=[  ['0300','助教'],  //省略部分代碼  ['0303','教授']  ];  vargenderCombo=newExt.form.ComboBox({  store:newExt.data.SimpleStore({  fields:['value','text'],  data:gender  }),  emptyText:'請(qǐng)輸入',  mode:'local',  triggerAction:'all',  valueField:'value',  displayField:'text',  readOnly:true  });  vardepartmentCombo=newExt.form.ComboBox({  store:newExt.data.SimpleStore({  fields:['value','text'],  data:department  }),  //與上面定義genderCombo類似，故省略部分代碼  …  });  vartitleCombo=newExt.form.ComboBox({  store:newExt.data.SimpleStore({  fields:['value','text'],  data:title  }),  //與上面定義genderCombo類似，故省略部分代碼  …  });  //當(dāng)選擇“性別”、“院系”、“職稱”時(shí)，提供相應(yīng)的下拉列表作為單元格編輯器，  供用戶選擇；當(dāng)選擇“年齡”、“論文數(shù)量”時(shí)，提供數(shù)字文本框供用戶輸入  this.customEditors={  'GENDER':newExt.grid.GridEditor(genderCombo),  'DEPARTMENT':newExt.grid.GridEditor(departmentCombo),  'TITLE':newExt.grid.GridEditor(titleCombo),  'AGE':newExt.grid.GridEditor(newExt.form.NumberField({selectOnFocus:true,  style:'text-align:left;'})),  'PAPER':newExt.grid.GridEditor(newExt.form.NumberField({selectOnFocus:true,  style:'text-align:left;'}))  };  Ext.ux.grid.MyColumnModel.superclass.constructor.call(this,column);  };

Ext.extend(Ext.ux.grid.MyColumnModel,Ext.grid.ColumnModel,{  //通過覆蓋父類中的方法getCellEditor,實(shí)現(xiàn)根據(jù)表達(dá)式中條件列的不同取值，  為表達(dá)式的值所在單元格返回不同的編輯器  getCellEditor:function(colIndex,rowIndex){  varp=this.store.getAt(rowIndex);  n=p.data.attrName;//對(duì)應(yīng)表達(dá)式的條件列的取值   if(colIndex==4)//表達(dá)式的值propertyValue所在的列  {  if(this.customEditors[n]){  returnthis.customEditors[n];  }else{  //如果沒有定義特定的單元格編輯器，則返回普通的文本框編輯器  vared=newExt.grid.GridEditor(newExt.form.TextField({  selectOnFocus:true  })  );  returned;  }  }  else  returnthis.config[colIndex].editor;  }  });

清單4.基金申請(qǐng)條件組件        Ext.onReady(function(){  varcomboData1=[  ['AGE','年齡'],  //省略部分代碼  ['DEPARTMENT','院系']  ];  varcomboData2=[  ['>','大于'],  //省略部分代碼  ['!=','不等于']  ];  varcombo1=newExt.form.ComboBox({  id:'attrCombo',  store:newExt.data.SimpleStore({  fields:['value','text'],  data:comboData1  }),  emptyText:'請(qǐng)選擇',  mode:'local',  triggerAction:'all',  valueField:'value',  displayField:'text',  readOnly:true  });  varcombo2=newExt.form.ComboBox({  id:'operatorCombo',  store:newExt.data.SimpleStore({  fields:['value','text'],  data:comboData2  }),  //與上面定義combo1類似，故省略部分代碼  …  });   varconditiondata=[];  vargStore=newExt.data.SimpleStore({  fields:[  {name:'fundConditionId'},  {name:'attrName'},  {name:'operator'},  {name:'propertyValue'}  ],  data:conditiondata  });  varsm=newExt.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});  varcolumn=[  sm,  {  header:'條件id',  dataIndex:'fundConditionId',  hidden:true  },{  header:'屬性名稱',  dataIndex:'attrName',  editor:newExt.grid.GridEditor(combo1),  //attributeRenderer方法是用來格式化輸出的函數(shù)，這里從略。  renderer:attributeRenderer.createDelegate(this,["properties"],0)  },{  header:'操作符',  dataIndex:'operator',  editor:newExt.grid.GridEditor(combo2),  renderer:attributeRenderer.createDelegate(this,["operators"],0)  },{  header:'屬性值',  dataIndex:'propertyValue',  editor:newExt.grid.GridEditor(newExt.form.TextField({selectOnFocus:true})),  renderer:attributeRenderer.createDelegate(this,["values"],0)  }  ];   varfundConditionGrid=newExt.grid.EditorGridPanel({  name:'fundCondition',  id:'fundCondition',  store:gStore,  cm:newExt.ux.grid.MyColumnModel(this,gStore,column),  sm:sm,  tbar:newExt.Toolbar(['-',{  text:'添加條件',  //_onAddCondition方法是按鈕“添加條件”的響應(yīng)函數(shù)，實(shí)現(xiàn)在列表中增加一個(gè)條件的功能，這里從略。  handler:_onAddCondition.createDelegate(this)  },'-',{  text:'刪除條件',  //_onRemoveCondition方法是按鈕“刪除條件”的響應(yīng)函數(shù)，實(shí)現(xiàn)在列表中刪除一個(gè)條件的功能，這里從略。  handler:_onRemoveCondition.createDelegate(this)  },'-']),  frame:true,  collapsible:true,  animCollapse:false,  title:'助研基金申請(qǐng)條件',  width:350,  height:300,  iconCls:'icon-grid',  clicksToEdit:1,  renderTo:'example1'  });  });

當(dāng)屬性名稱選擇性別、職稱或者院系時(shí)，屬性值分別對(duì)應(yīng)不同的下拉列表供用戶選擇，當(dāng)屬性名稱選擇年齡或者論文數(shù)量時(shí)，屬性值則對(duì)應(yīng)數(shù)字文本框供用戶輸入。如圖1-圖5所示。

 
圖1.編輯助研基金申請(qǐng)條件1

 
圖2.編輯助研基金申請(qǐng)條件2

 
圖3.編輯助研基金申請(qǐng)條件3

 
圖4.編輯助研基金申請(qǐng)條件4

 
圖5.編輯助研基金申請(qǐng)條件5

這里表示計(jì)算機(jī)學(xué)院年齡不大于35歲講師以上（含）職稱的女教師，如果發(fā)表的論文數(shù)量多于10篇的，有資格申請(qǐng)?jiān)撝谢稹？梢钥闯鲈摶痼w現(xiàn)了對(duì)優(yōu)秀青年女教師的科研支持。此部分的代碼請(qǐng)參考示例代碼中的Example1.js。

用ComboBox實(shí)現(xiàn)在光標(biāo)處插入文本

在上述的教職工科研基金管理系統(tǒng)中，如果滿足基金申請(qǐng)條件的教職工人數(shù)很多，我們就需要根據(jù)某種評(píng)分機(jī)制對(duì)申請(qǐng)人進(jìn)行評(píng)分，然后按分?jǐn)?shù)從高到低擇優(yōu)選擇。這里以構(gòu)建一個(gè)制定申請(qǐng)人得分計(jì)算公式的組件為例。制定計(jì)算公式時(shí)，可以引用上面系統(tǒng)中已經(jīng)定義好的申請(qǐng)條件作為計(jì)分要素，然后用加減乘除等運(yùn)算符將計(jì)分要素和比例系數(shù)連接起來構(gòu)成得分計(jì)算公式。

為實(shí)現(xiàn)上面的功能，我們考慮在文本框的右邊放一個(gè)按鈕，點(diǎn)擊該按鈕，列出所有的計(jì)分要素，選擇一個(gè)計(jì)分要素后，在文本框中光標(biāo)所在位置插入該計(jì)分要素。列出所有的計(jì)分要素，并選擇其一，***的實(shí)現(xiàn)方式是ComboBox，但是使用ComboBox，選擇的值會(huì)覆蓋文本框內(nèi)所有的文字，無法實(shí)現(xiàn)在光標(biāo)處插入文本的功能。

所以我們決定擴(kuò)展ComboBox，使得新的ComboBox支持在光標(biāo)處插入文本。清單5是我們?yōu)闈M足上述需求而擴(kuò)展的新類valueCombo的部分代碼，清單6是使用valueCombo作為申請(qǐng)人得分計(jì)算公式組件。效果如圖6和圖7所示。

 
圖6.插入計(jì)分要素編輯評(píng)分計(jì)算公式

 
圖7.評(píng)分計(jì)算公式

清單5.定義新類valueCombo        Ext.ns('Ext.ux.form');   ExtExt.ux.form.valueCombo=Ext.extend(Ext.form.ComboBox,{  initComponent:function(){  Ext.ux.form.valueCombo.superclass.initComponent.call(this);  },  setValue:function(v){  vvartext=v;  //直接顯示選項(xiàng)的值，不做格式化轉(zhuǎn)換，覆蓋原來ComboBox的格式化顯示的功能  /*if(this.valueField){  varr=this.findRecord(this.valueField,v);  if(r){  text=r.data[this.valueField];  }elseif(Ext.isDefined(this.valueNotFoundText)){  text=this.valueNotFoundText;  }  }*/  this.lastSelectionText=text;  if(this.hiddenField){  this.hiddenField.value=v;  }  Ext.ux.form.ComboBox.superclass.setValue.call(this,text);  this.value=v;  returnthis;  },  //private  onSelect:function(record,index){  if(this.fireEvent('beforeselect',this,record,index)!==false){  varstr=record.data[this.valueField||this.displayField];  //實(shí)現(xiàn)在光標(biāo)處插入文本的功能  vartc=this.getRawValue();  vartclen=this.getRawValue().length;  this.focus();  //以下代碼只對(duì)Firefox生效  if(typeofdocument.selection!="undefined")  {  document.selection.createRange().text=str;  }  else  {  this.setValue(tc.substr(0,this.el.dom.selectionStart)+str  +tc.substring(this.el.dom.selectionStart,tclen));  }  this.collapse();  this.fireEvent('select',this,record,index);  }  },  onLoad:function(){  if(!this.hasFocus){  return;  }  if(this.store.getCount()>0){  this.expand();  this.restrictHeight();  if(this.lastQuery==this.allQuery){  //if(this.editable){  //this.el.dom.select();為了保持光標(biāo)位置，注釋掉此段代碼  //}  if(!this.selectByValue(this.value,true)){  this.select(0,true);  }  }else{  this.selectNext();  if(this.typeAhead&&this.lastKey!=Ext.EventObject.BACKSPACE  &&this.lastKey!=Ext.EventObject.DELETE){  this.taTask.delay(this.typeAheadDelay);  }  }  }else{  this.onEmptyResults();  }  //this.el.focus();  },  initQuery:function(){  //屏蔽掉下拉列表進(jìn)行匹配查詢的功能  //this.doQuery(this.getRawValue());  }  });

清單6.申請(qǐng)人得分計(jì)算公式組件        varcomboData=[  ['AGE','年齡'],  //省略部分代碼  ['DEPARTMENT','院系']  ];  varscoreExpression=newExt.ux.form.valueCombo({  width:250,  listWidth:120,  fieldLabel:‘得分計(jì)算公式’,  mode:'local',  valueField:'value',  displayField:'text',  triggerAction:'all',  store:newExt.data.SimpleStore({  fields:['value','text'],  data:comboData  }),  triggerConfig:{tag:"img",src:"../images/score-element.jpg",  cls:"x-textfield-button-trigger"}  });

該計(jì)算公式體現(xiàn)了對(duì)青年教職工和女性教職工的鼓勵(lì)和扶助。此部分的代碼請(qǐng)參考示例代碼中的Example2.js。

實(shí)現(xiàn)帶ComboBox的TwinTriggerField

在上述的教職工科研基金管理系統(tǒng)中，需要一個(gè)查詢員工詳細(xì)信息的控件。只要輸入員工號(hào)或者從下拉列表中選擇一個(gè)員工號(hào)，就能自動(dòng)載入該員工所有的信息。同時(shí)希望能根據(jù)搜索條件查詢符合條件的員工，從中選擇某個(gè)員工，查看他的詳細(xì)信息。

依據(jù)這個(gè)需求，我們要構(gòu)建一個(gè)查詢員工的組件，當(dāng)在文本框中輸入員工號(hào)前幾位能自動(dòng)列出所有相關(guān)員工號(hào)，或者直接從下拉框中選擇一個(gè)員工號(hào)，隨后自動(dòng)載入員工信息；當(dāng)點(diǎn)擊文本框右邊的搜索按鈕，打開新的窗口，在新窗口中能夠根據(jù)員工職位、院系、出生日期所在范圍等進(jìn)行搜索，選中員工之后，也會(huì)自動(dòng)載入該員工的信息。如果能將ComboBox和TwinTriggerField的功能結(jié)合起來，將是實(shí)現(xiàn)此需求的最直接、最便利的方法。

清單7是我們?yōu)闈M足上述需求而擴(kuò)展的新類ComboSearchField的部分代碼，清單8是使用ComboSearchField構(gòu)造了一個(gè)Form作為教職工信息查詢控件。此部分的完整代碼請(qǐng)參考Example3.js。效果如圖8和圖9所示。

 
圖8. TwinTrigger 之下拉列表

 
圖9. 載入員工信息

清單7.定義新類ComboSearchField        Ext.ns('Ext.ux.form');   ExtExt.ux.form.ComboSearchField=Ext.extend(Ext.form.ComboBox,{  initComponent:function(){  Ext.ux.form.ComboSearchField.superclass.initComponent.call(this);  this.triggerConfig={  //使用TwinTrigger的樣式  tag:'span',cls:'x-form-twin-triggers',cn:[  {tag:"img",src:Ext.BLANK_IMAGE_URL,cls:"x-form-trigger"+  this.triggerClass},//使用默認(rèn)ComboBox的樣式  {tag:"img",src:Ext.BLANK_IMAGE_URL,cls:"x-form-trigger"+  this.trigger2Class}//自定義Trigger2的樣式  ]};  },  getTrigger:function(index){  returnthis.triggers[index];  },  initTrigger:function(){  varts=this.trigger.select('.x-form-trigger',true);  this.wrap.setStyle('overflow','hidden');  vartriggerField=this;  ts.each(function(t,all,index){  t.hide=function(){  varw=triggerField.wrap.getWidth();  this.dom.style.display='none';  triggerField.el.setWidth(w-triggerField.trigger.getWidth());  };  t.show=function(){  varw=triggerField.wrap.getWidth();  this.dom.style.display='';  triggerField.el.setWidth(w-triggerField.trigger.getWidth());  };  vartriggerIndex='Trigger'+(index+1);   if(this['hide'+triggerIndex]){  t.dom.style.display='none';  }  //this.mon(t,'click',this['on'+triggerIndex+'Click'],this,  {preventDefault:true});  //定義***個(gè)trigger的觸發(fā)事件  if(index==0)  t.on("click",this['onTriggerClick'],this,{preventDefault:true});  //定義第二個(gè)trigger的觸發(fā)事件  if(index==1)  t.on("click",this['onTrigger2Click'],this,{preventDefault:true});  t.addClassOnOver('x-form-trigger-over');  t.addClassOnClick('x-form-trigger-click');  },this);  this.triggers=ts.elements;  },   validationEvent:false,  validateOnBlur:false,  trigger2Class:'x-form-search-trigger',  width:180,  hasSearch:false,  paramName:'query',  onTrigger2Click:Ext.emptyFn  });

清單8.教職工信息查詢控件        Ext.onReady(function(){  varemployeeData=[  ['20001234'],  //省略部分代碼  ['20091546']  ];  varsearchField=newExt.ux.form.ComboSearchField({  id:"employeeId",  fieldLabel:'員工編碼'+'<fontcolorfontcolor="red">*</font>',  store:newExt.data.SimpleStore({  fields:['value'],  data:employeeData  }),  valueField:'value',  displayField:'value',  typeAhead:false,  allowBlank:false,  mode:'local',  triggerAction:'all',  //打開客戶查詢窗口，代碼從略  onTrigger2Click:_searchCustomer.createDelegate(this),  listeners:{  //根據(jù)選中客戶編碼加載客戶信息，代碼從略  select:_select_customer_id.createDelegate(this)  }  });   //以下代碼僅在Firefox中運(yùn)行有效  //初始化生成表格  varemployeeForm=newExt.FormPanel({  id:"employeeForm",  frame:true,  title:"教職工信息查詢",  autoScroll:true,  items:[{  layout:'column',  border:false,  autoHeight:true,  defaults:{  layout:'form',  border:false,  width:100,  bodyStyle:'padding:4px'  },  items:[{  columnWidth:0.33,  name:"form1",  id:"form1",  defaultType:'textfield',  defaults:{  width:200  },  items:[searchField,  {  fieldLabel:'職稱',  name:'title',  id:'title',  disabled:true  },{  fieldLabel:'出生日期',  name:'birthday',  id:'birthday',  disabled:true  },{  fieldLabel:'聯(lián)系電話',  name:'tel',  id:'tel',  disabled:true  }]},{  columnWidth:0.33,  //從略  },{  columnWidth:0.33,  //從略  }]  }],  renderTo:'example3'  });  });

本文在介紹了Ext的基本概念以及擴(kuò)展Ext的一般方法后，以三個(gè)應(yīng)用場(chǎng)景為例，詳細(xì)描述了如何從已有的Ext控件出發(fā)，借鑒其他控件的功能，開發(fā)出滿足實(shí)際需要的新控件。對(duì)于初學(xué)者來說，這種“移花接木”式的開發(fā)方式，不僅能使開發(fā)者深入了解每個(gè)控件背后的實(shí)現(xiàn)方式，而且能迅速助其實(shí)現(xiàn)新的功能、新的需求。可以說，它是一種值得推薦的創(chuàng)新方式。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。