EXT各个控件属性(3).docx

一、如何同步调用Ajax远程数据 /同步方式，API不直接提供，获取XHR的conn的引用即可varurl=myApp/getUserList.do;varconn=newExt.data.Connection()conn;conn.open(POST,url,false);conn.send(null);varjson=Ext.decode(conn.responseText);/异步方式，这是常用的方式newExt.data.Connection().request(/此即是Ext和Struts交互的关键url:myApp/getUserList.do,params:id:10001,name:测试,failure:requestFailed,success:requestSuccessful/ 同步方式，API不直接提供，获取XHR的conn的引用即可 var url = myApp/getUserList.do; var conn = new Ext.data.Connection()conn; conn.open(POST, url, false); conn.send(null); var json = Ext.decode(conn.responseText); / 异步方式，这是常用的方式 new Ext.data.Connection().request( / 此即是Ext和Struts交互的关键 url: myApp/getUserList.do, params: id: 10001,name: 测试, failure: requestFailed, success: requestSuccessful 二、全局性、强制指定HTTP方法（动词） view plaincopy to clipboardprint?Ext.Ajax.on(beforerequest,function()arguments1.method=GET/orPOSTPUTDELETE);Ext.Ajax.on(beforerequest, function() arguments1.method = GET / or POSTPUTDELETE ); 三、怎么对form中的textfield赋值 view plaincopy to clipboardprint?Ext.getCmp(TextField_id).setValue(value);Ext.getCmp(TextField_id).setValue(value); 四、布局一些已知的限制 fit的layout中items只能放一个子组件，即使放多个，也只会显示第一个。而且aotuHeight属性页不能和fit一起使 用；border布局方式中，分为东西南北中五个region，其中center是自动计算大小的。而south,north只能设置高 度，west,east只能设置宽度。 （by 佚名网友）五、返回当前类的静态成员的另外一种方法：totype view plaincopy to clipboardprint?/*classxyj.Controlller*AModelclassrepresentsandmanagesatablesinadatabase.*Modelinstancesrepresentindividualrecordsinthetable.*ModelsfollowtheActiveRecorddesignpatternforobject-relationalmapping.*/xyj.data.Controlller=function(config)this.parents=;this.children=;Object.apply(this,config);Array.each(this.belongTo,this.assignElment,scope:this,which:0);Array.each(this.hasMany,this.assignElment,scope:this,which:1);xyj.data.Ctotype=/*原本函数是这样的（this还是指当前实例）：*var_instancePrototype=totype;Array.each(this.belongTo,function(i)if(typeofi=string)_instancePrototype.belongTo.call(this,i);elseif(NJS.Array.isArray(i)_instancePrototype.belongTo.call(this,i0,i1);,this);Array.each(this.hasMany,function(i)if(typeofi=string)_instancePrototype.hasMany.call(this,i);elseif(NJS.Array.isArray(i)_instancePrototype.hasMany.call(this,i0,i1);,this);*当前，我们变成这样：*paramschema*/assignElment:function(i)var_instancePrototype=totype;if(typeofi=string)_instancePrototypethis.which?hasMany:belongTo.call(this.scope,i);elseif(Array.isArray(i)_instancePrototypethis.which?hasMany:belongTo.call(this.scope,i0,i1);/* * class xyj.Controlller * A Model class represents and manages a tables in a database. * Model instances represent individual records in the table. * Models follow the Active Record design pattern for object-relational mapping. */ xyj.data.Controlller = function(config) this.parents = ; this.children = ; Object.apply(this, config); Array.each(this.belongTo, this.assignElment, scope:this, which: 0); Array.each(this.hasMany, this.assignElment, scope:this, which: 1); ; xyj.data.Ctotype = /* * * 原本函数是这样的（this还是指当前实例）： * var _instancePrototype = totype; Array.each(this.belongTo, function(i) if (typeof i = string) _instancePrototype.belongTo.call(this, i); else if (NJS.Array.isArray(i) _instancePrototype.belongTo.call(this, i0, i1); , this); Array.each(this.hasMany, function(i) if (typeof i = string) _instancePrototype.hasMany.call(this, i); else if (NJS.Array.isArray(i) _instancePrototype.hasMany.call(this, i0, i1); , this); * 当前，我们变成这样： * param schema */ assignElment : function(i) var _instancePrototype = totype; if (typeof i = string) _instancePrototypethis.which?hasMany:belongTo.call( this.scope, i ); else if(Array.isArray(i) _instancePrototypethis.which?hasMany:belongTo.call( this.scope, i0, i1 ); 六、GridPanel如何加上自动的顺序号？ 制定一个列Column对象：new Ext.grid.RowNumberer()七、如何在表格中添加CheckBox呢？ view plaincopy to clipboardprint?varsm=newExt.grid.CheckboxSelectionModel();varcm=newExt.grid.ColumnModel(,sm,/添加的地方);var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel( , sm, / 添加的地方 ); 八、EXT怎么给IMAGE或者DIV控件加右键菜单 view plaincopy to clipboardprint?Ext.onReady(function()Ext.fly(foo).on(contextmenu,function()alert(你右击了一下图片); Ext.onReady(function() Ext.fly(foo).on(contextmenu, function()alert(你右击了一下图片) ); 注意：那个ext-core.js要引入上九、手动触发浏览器事件 ，IE与FF有别:view plaincopy to clipboardprint?/NowaytogettheeventofsubmitonFF,/usesonsubmit=returnfalse;inHTMLinsteaed!functiondoSubmit(e,el)if(e.browserEvent.type=submit)IEcaughtOK!;if(Ext.isIE)el.fireEvent(onsubmit);elsevare=document.createEvent(Events);e.initEvent(submit,true,true);el.dispatchEvent(e);/ No way to get the event of submit on FF, /uses onsubmit=return false; in HTML insteaed! function doSubmit(e, el) if(e.browserEvent.type =submit) IE caught OK! ; if (Ext.isIE) el.fireEvent(onsubmit); else var e = document.createEvent(Events); e.initEvent(submit, true, true); el.dispatchEvent(e); 注意不是submit()的执行方法，而是触发、分发事件，有一定区别。十、如何选取Grid的数据记录？ 行选择模式的话，将是：view plaincopy to clipboardprint?varrowcount=grid.getSelectionNode().getSelections();var rowcount = grid.getSelectionNode().getSelections(); 可以获取全部选中的记录，得到的rowcount将是一个Array，比如想获取sex列的数据，语句如下:view plaincopy to clipboardprint?varstrsex=rowcounti.get(sex);var strsex = rowcounti.get(sex); 十一、Grid单元格选取模式 如果在GridPanel的配置属性增加sm属性如下,则就是“单元格选择模式”:view plaincopy to clipboardprint?sm:newExt.grid.CellSelectionModel();sm: new Ext.grid.CellSelectionModel(); 当单击时将选中对应的某一个单元格，而不是默认的选择某一行。选择方式如下:view plaincopy to clipboardprint?varcell=grid.getSelectionNode().getSelectedCell();var cell = grid.getSelectionNode().getSelectedCell(); 得到的cell记录了当前选择的行(cell0)以及列(cell1).可以通过一下语句得到该单元格数据:view plaincopy to clipboardprint?varcolname=grid.getColumnModel().getDataIndex(cell1);/获取列名varcelldata=grid.getStore().getAt(cell0).get(colname);/获取数据getStore():获取表格的数据集getAt():获取该数据集cell0行get():获取该行colname的数据var colname = grid.getColumnModel().getDataIndex(cell1); /获取列名 var celldata = grid.getStore().getAt(cell0).get(colname); /获取数据 getStore():获取表格的数据集 getAt():获取该数据集cell0行 get():获取该行colname的数据 十二、Tree节点的拖放。 重写beforeNodeDrop/nodeDrop函数 view plaincopy to clipboardprint?Client.Tree.UI=Ext.extend(Ext.tree.TreePanel,beforeNodeDrop:function(e)vars=e.data.selections,r=;for(vari=0,len=s.length;ilen;i+)varticket=si.data.ID;/siisaRecordfromthegridif(!e.target.findChild(ID,ticket)/-filterduplicatesr.push(newExt.tree.TreeNode(/buildarrayofTreeNodestoaddallowDrop:false,text:Ticket#+ticket,ticket:ticket,action:view/qtip:String.format(01,si.data.summary,si.data.excerpt);e.dropNode=r;/returnthenewnodestotheTreeDDe.cancel=r.length1;/cancelifallnodeswereduplicates,nodeDrop:function(e)/watchList.setText(String.format(MyWatchList(0),watchList.childNodes.length);/storeWatchListgoeshere;);Client.Tree.UI = Ext.extend(Ext.tree.TreePanel, beforeNodeDrop: function(e) var s = e.data.selections, r = ; for (var i = 0, len = s.length; i len; i+) var ticket = si.data.ID; / si is a Record from the grid if (!e.target.findChild(ID, ticket) / - filter duplicates r.push(new Ext.tree.TreeNode( / build array of TreeNodes to add allowDrop: false, text: Ticket # + ticket, ticket: ticket, action: view /qtip: String.format(01, si.data.summary, si.data.excerpt) ); e.dropNode = r; / return the new nodes to the Tree DD e.cancel = r.length 1; / cancel if all nodes were duplicates , nodeDrop: function(e) / watchList.setText(String.format(My Watch List (0), watchList.childNodes.length); / storeWatchList goes here; ); 十三、Grid被拖动过程中， 修改提示文字。 重写getDragDropText函数 view plaincopy to clipboardprint?getDragDropText:function()vars=this.getSelectionModel().getSelections();if(s.length=1)returnString.format(Youarenowdragging#0,s0.data.ID);elsevartickets=;for(vari=0,len=s.length;ilen;i+)tickets.push(#+si.data.ID);returnString.format(Youarenowdraggingthe0selected1,s.length,tickets.join(,);getDragDropText: function() var s = this.getSelectionModel().getSelections(); if (s.length = 1) return String.format(You are now dragging #0, s0.data.ID); else var tickets = ; for (var i = 0, len = s.length; i len; i+) tickets.push(# + si.data.ID); return String.format(You are now dragging the 0 selected 1, s.length, tickets.join(, ); 十四、 用Ext Core插入Flash到页面。 只需要这个小小的函数： view plaincopy to clipboardprint?/*插入Flash电影文件到页面。原本RobertNyman的是用字符串拼凑的，现改为JSON2HTML。*例子：（在插入的地方）*paramObjectconfig配置参数*cfgStringsrcFlash电影的文件路径（SWF）*cfgStringidFlash电影元素的id（可选的）*cfgNubmerwidthFlash电影的宽度（可选的）*cfgNubmerheightFlash电影的高度（可选的）*cfgObjectparams参数（可选的）*credit:RobertNyman,/p/flashreplace/*/functionsetFlash(config)/*检测Flash是否安装*paramNumberversion*returnBooleanTrue表示已安装符合版本要求的Flash*/functioncheckForFlash(version)if(Ext.isIE)trynewActiveXObject(ShockwaveFlash.ShockwaveFlash.+version);returntrue;catch(e)returnfalse;elsevar_plugins=navigator.plugins;if(_plugins&navigator.mimeTypes.length0)if(_pluginsShockwaveFlash&_pluginsShockwaveFlashdescription.replace(/.*s(d+.d+).*/,$1)=version)returntrue;elsereturnfalse;if(!checkForFlash(config.version|7/*defaultFlashVersion*/)throwFlashisNOTReadly!;varchildren=tag:param,name:movie,value:config.src,tag:embed,type:application/x-shockwave-flash,src:config.src,width:config.width,height:config.height;var_params=config.params;if(_params)for(variin_params)children.push(tag:param,name:i,value:_paramsi);Ext.fly(config.el).createChild(Object.apply(tag:object,classid:clsid:D27CDB6E-AE6D-11cf-96B8-444553540000,data:config.src,children:children,config);/* * 插入Flash电影文件到页面。原本Robert Nyman的是用字符串拼凑的，现改为JSON2HTML。 * 例子：（在插入的地方） * param Object config 配置参数 * cfg String src Flash电影的文件路径（SWF） * cfg String id Flash电影元素的id（可选的） * cfg Nubmer width Flash电影的宽度（可选的） * cfg Nubmer height Flash电影的高度（可选的） * cfg Object params 参数（可选的） * credit: Robert Nyman, /p/flashreplace/ */ function setFlash (config) /* * 检测Flash是否安装 * param Number version * return Boolean True表示已安装符合版本要求的Flash */ function checkForFlash (version) if(Ext.isIE) try new ActiveXObject(ShockwaveFlash.ShockwaveFlash. + version); return true; catch(e) return false; else var _plugins = navigator.plugins; if( _plugins & navigator.mimeTypes.length 0) if(_pluginsShockwave Flash & _pluginsShockwave Flashdescription.replace(/.*s(d+.d+).*/, $1) = version) return true; else return false; if(!checkForFlash(config.version | 7 /*defaultFlashVersion*/) throw Flash is NOT Readly!; var children = tag : param ,name : movie ,value : config.src , tag : embed ,type : application/x-shockwave-flash ,src : config.src ,width : config.width ,height: config.height ; var _params = config.params; if(_params) for(var i in _params) children.push( tag : param ,name : i ,value: _paramsi ); Ext.fly(config.el).createChild(Object.apply( tag : object ,classid : clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 ,data : config.src ,children : children , config); 十五、为HTMLEditor加入“插入图片”按钮。 如图：使用以下插件view plaincopy to clipboardprint?/*/forum/showthread.php?p=128146#post128146*paramObjectconfig*/Ext.ux.HtmlEditorImageInsert=function(config)Ext.apply(this,config);Ext.ux.HtmlEditorImageItotype=popTitle:插入图片,popMsg:请粘贴你要插入图片的地址,popWidth:350,popValue:,init:function(htmlEditor)this.editor=htmlEditor;this.editor.on(render,this.onRender,this);,onRender:function()if(!Ext.isSafari)this.editor.tb.add(itemId:htmlEditorImage,iconCls:icon16-Ext-ux-HtmlEditorImageInsert,enableToggle:false,scope:this,handler:function()Ext.MessageBox.show(title:this.popTitle,msg:this.popMsg,width:this.popWidth,buttons:Ext.MessageBox.OKCANCEL,prompt:true,value:this.popValue,scope:this,fn:function(btn,text)/todo验证url地址if(btn=ok)this.editor.relayCmd(insertimage,text););,clickEvent:mousedown,tabIndex:-1);/* * /forum/showthread.php?p=128146#post128146 * param Object config */ Ext.ux.HtmlEditorImageInsert = function(config) Ext.apply(this, config); Ext.ux.HtmlEditorImageItotype = popTitle: 插入图片, popMsg: 请粘贴你要插入图片的地址, popWidth: 350, popValue: , init:function(htmlEditor) this.editor = htmlEditor; this.editor.on(render, this.onRender, this); , onRender:function() if (!Ext.isSafari) this.editor.tb.add( itemId: htmlEditorImage, iconCls: icon16-Ext-ux-HtmlEditorImageInsert, enableToggle: false, scope: this, handler: function() Ext.MessageBox.show( title: this.popTitle, msg: this.popMsg, width: this.popWidth, buttons: Ext.MessageBox.OKCANCEL, prompt: true, value: this.popValue, scope: this, fn: function(btn, text) /todo 验证url地址 if (btn = ok) this.editor.relayCmd(insertimage, text); ); , clickEvent: mousedown, tabIndex: -1 ); 用法如下：view plaincopy to clipboardprint?varhtmlEditor=newExt.form.HtmlEditor(plugins:newExt.ux.HtmlEditorImageInsert,applyTo:this.formEl.child