锘??xml version="1.0" encoding="utf-8" standalone="yes"?> ExtBuilder is an eclipse plugin can help developer work out good style Ext javascript code without typing code. Now, you can see the data at preview page.
闂鍘熷洜錛?br />
1錛歫s浠g爜鐢ㄤ簡javas
4.涓婁紶鍥劇墖鏃舵彁紺猴細Object doesn't support this property or method
鍘熷洜錛氭湇鍔″櫒涓婂畨瑁呯殑AspJpeg鐨勭増鏈綆浜?.4鐗堛?br />
瑙e喅鏂規硶錛氬畨瑁?.4鎴栦互涓婄増鏈殑AspJpeg緇勪歡銆?
]]>Introduction
Installation
Eclipse 3.x
Apatana
Note: Apatana Studio removed some build-in plugins from Eclipse, such as GEF,icu,JDT,etc. If you definitely want to use Apatana Studio without eclipse, please install these plguins first.
Starting
Kick start
Overview
Before you start to editing a Ext page, make sure you opened Outline View and Properties View. If not, please click Window->Show View to open these two views.
Editor View
It’s a multi-pages editor contains a source code editor and a UI editor. In source code editor, you can see the real code extbuilder generate for you. Please focus the initUIComponents function. In UI editor, you can see one palette at left side and a embedded browser at right side. With the embedded browser, you can preview the code generated by ExtBuilder.
Outline View
The outline view is a component tree view. You can select specific component in the view.
Properties View
The most important view you have to deal. In this view, you can set the configuration of one component. For example: For a Panel component, you may set the title property to ‘MyPanel’, the layout property to ‘Border’, the width property to ‘100’, etc. For a GridPanel component, you may set the store property and columns property. All you change make to a component take effect immediately. Both the code editor and UI editor will change. It’s a good way to watch your settings how change the UI to your wanted style.
Drag Components
In UI editor, you can see a palette with some components in several folders. Now extbuilder supports most components in latest Ext 2.2 You could click one component, such as a Panel then move the mouse to outline view, there must be a component named panel, it's the root component of one panel class. Click the mouse again, then the root panel component now have a child panel. In the way, you can use any components and organize the component tree as you wish. Although you may think drag a component and drop it to a canvas is better, but that means ExtBuilder need to implement all Ext components drawing,behavior and layout in Java code. From my opinion, this way is the fastest way to build a GUI page. How to
Set Properties
Ext component have many properties. ExtBuilder divide these properties into two categories: common properties and advanced properties. By default, only common properties are shown,you can show advanced properties by click the Advanced button at the top toolbar of Properties View. Properties can be string, integer,drop down list. Some special properties like store, toolbar,buttons,columns Model will pop up a dialog for user set.
Set Layout
There are two panels, one parent, one child.
Because Ext border layout require a center region component, so when you set the layout to 'border', and not set the child panel's region to 'center', you may see some error message in browser, it's not a bug of ExtBuilder.
FormPanel
Then you get a two column form panel
Toolbar
Each Ext Panel has two toolbars, tbar and bbar.
tbar : new Ext.Toolbar([{
handler : function(button, event) {
this.onButtonClick(button, event);
}.createDelegate(this),
text : "button"
}])
Look at this code block, I use a little trick. Because ExtBuilder need to show preview page for users, some javascript errors will make the preview page as blank page. So I have to make it runs fine when renderer ext components. You may need to write your own event handler function in your class. For example:
...,
onButtonClick : function(button, event){
// your code here
}
Buttons
Each Panel has one buttons property. Just same as Toolbar buttons editing except the component can add here is only Ext.Button. You can use buttonAlign to align button at left,right or center.
Grid
ExtBuilder support three grid panels. GridPanel,PagingGridPanel and EditorGridPanel. PagingGridPanel is a gridpanel with paging toolbar on bottom.
Store
Store can take data from remote(HttpProxy) or local(MemoryProxy). Here is a example we use MemoryProxy to build grid.
loadData : function() {
this.store1.load();
}
here store1 is the component name of store.
system.CorpSelectPanel = function(config) {
Ext.applyIf(this, config);
this.initUIComponents();
system.CorpSelectPanel.superclass.constructor.call(this);
//load store data here
this.loadData();
};
]]>
]]>
http://blog.csdn.net/lenotang/archive/2008/10/02/3009575.aspx
http://blog.csdn.net/lenotang/archive/2008/10/02/3009685.aspx
http://blog.csdn.net/lenotang/archive/2008/10/02/3009688.aspx
http://blog.csdn.net/lenotang/archive/2008/10/02/3009692.aspx
1銆丒xt.apply(Object obj, Object config, Object defaults ) : Object
灝哻onfig涓殑鎵鏈夊睘鎬у鍒跺埌obj涓紝濡傛灉閰嶇疆浜哾efaults錛屽垯鍏堝皢defaults涓殑灞炴т紶鍏bj錛岀劧鍚庡啀灝哻onfig涓睘鎬т紶鍏ワ紝涓鑸琩efaults鐢ㄤ簬瀹氫箟涓浜涢粯璁ゅ箋?br />
娉ㄦ剰錛氭瘡涓弬鏁伴兘蹇呴』鏄璞bject錛岃屼笉鑳芥槸function鎴栧叾浠栥?br />
鍒涘緩object鍙互閫氳繃new function(){}銆乶ew Object()銆亄}絳夋柟娉曞垱寤恒?/p>
2銆丒xt.emptyFn: Function
鐢ㄤ簬榪斿洖涓涓┖鍑芥暟錛屼究浜庡湪紼嬪簭涓垱寤虹┖鍑芥暟銆侲xt.emptyFn榪斿洖function(){}
3銆丒xt.applyIf(Object obj, Object config) : Object鍔熻兘濡傚悓Ext.apply,浣嗘槸鍙妸config涓瓨鍦ㄨ宱bj涓嶅瓨鍦ㄧ殑灞炴у鍒惰繃鍘匯?/p>
4銆丒xt.addBehaviors( Object obj ) : void涓洪〉闈腑涓涓垨澶氫釜鍏冪礌娣誨姞浜嬩歡
鍏冪礌浣跨敤css瑙勫垯鏌ユ壘錛屽叾涓厓绱犱笌浜嬩歡鐢ˊ闅斿紑 Ext.addBehaviors({
//涓篿d涓篺oo鐨勫厓绱犱笅鐨勬墍鏈塧鍏冪礌娣誨姞click浜嬩歡
'#foo a@click' : function(e, t){
// do something
},
// 涓哄涓夋嫨鍣ㄦ坊鍔犵浉鍚岀殑浜嬩歡(mouseover)銆傚湪@涔嬪墠浣跨敤閫楀彿鍒嗗紑
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
5銆丒xt.id( [Mixed el], [String prefix] ) : String
榪斿洖涓涓敮涓鐨刬d鍊箋?br />
濡傛灉鍙渶瑕佽幏鍙栦竴涓敮涓鐨刬d鍊鹼紝鍒欑洿鎺ヨ皟鐢‥xt.id()錛?br />
濡傛灉闇瑕佷負鏌愪釜鍏冪礌璁懼畾涓涓敮涓鐨刬d鍊煎茍榪斿洖id鍒欒皟鐢‥xt.id(el)錛宔l涓哄厓绱營d銆丏om瀵硅薄鎴朎xt鐨凟lement瀵硅薄銆?br />
濡傛灉闇瑕佹寚瀹氱壒瀹氱殑鍓嶇紑錛屽垯闇瑕佷紶鍏ョ浜屼釜鍙傛暟錛屽Ext.id(el,”myPrix-”)錛岄粯璁ゅ墠緙涓篹xt-gen錛屽榛樿榪斿洖id鍙兘涓篹xt-gen4錛屾寚瀹氫簡鍓嶇紑鍚庡彲鑳借繑鍥瀖yPrix-4銆?/p>
6銆丒xt.extend( Object subclass, Object superclass, [Object overrides] ) : void瀹炵幇瀵硅薄緇ф壙錛岀洰鍓嶈繕涓嶅お浜嗚В鍏蜂綋鍘熺悊 錛燂紵錛?/p>
7銆丒xt.namespace( String namespace1, String namespace2, String etc ) : void
鍒涘緩鍛藉悕絀洪棿錛?br />
濡侲xt.namespace("Company","MyNS.mydata","Data.format.string")
鐒跺悗鍙互鍒涘緩濡侻yNS.mydata.doit=function(){…}鐨勬帴鍙?br />
娉細鍛藉悕絀洪棿鐨勭畝鏄撹皟鐢細Ext.ns()錛屽湪Ext Api涓湭緇欏嚭姝ょ敤娉曘?/p>
8銆丒xt.urlEncode( Object o ) : String灝嗕竴涓猨son瀵硅薄杞崲縐皍rl鍙傛暟涓詫紝鏀寔閫氳繃鏁扮粍涓轟竴涓弬鏁拌瀹氬涓箋?br /> 濡傚皢{a:1,b:2,c:[1,3,5,7]}杞崲涓篴=1&b=2&c=1&c=3&c=5&c=7
9銆丒xt.urlDecode( String string, [Boolean overwrite] ) : Object灝唘rl鍙傛暟涓茶漿鎹負json瀵硅薄錛宱verwrite濡傛灉涓簍rue錛屽垯鍚庨潰鐨勫悓鍚嶅弬鏁板艱鐩栧墠闈㈢殑鍚屽悕鍙傛暟鍊鹼紙榛樿涓篺alse鍗充笉瑕嗙洊鑰屼互鏁扮粍褰㈠紡榪斿洖錛夈?br />
濡?Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7")
榪斿洖鐨勫璞″唴瀹逛負{a:1,b:2,c:[1,3,5,7]}
Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7",true)
榪斿洖{a:1,b:2,c:7}
10銆丒xt.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void閬嶅巻array騫跺姣忛」鍒嗗埆璋冪敤fn鍑芥暟銆傚鏋渁rray涓嶆槸鏁扮粍鍒欏彧鎵ц涓嬈°?br />
濡傛灉鏌愰」fn鎵ц緇撴灉榪斿洖false錛堝繀欏繪槸false錛寀ndefined鏃犳晥錛夛紝閬嶅巻閫鍑猴紝鍚庨潰鐨刟rray欏瑰皢涓嶈閬嶅巻銆?br />
閬嶅巻榪囩▼涓瘡嬈′負fn浼犲叆鍙傛暟鍒嗗埆涓篬褰撳墠鏁扮粍欏筣錛孾褰撳墠绱㈠紩]鍜孾鏁扮粍array]涓変釜鍙傛暟銆?br />
Scope鐢ㄤ簬璁懼畾fn鍑芥暟涓殑this鎸囬拡銆?br />
濡?Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.length錛?+a.length)
});
灝嗗驚鐜脊鍑猴細
index:0 value:1 array.length錛?
index:1 value:3 array.length錛?
index:2 value:5 array.length錛?
index:3 value:7 array.length錛? Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.length錛?+a.length);
return v!=5; //鍒扮涓夐」鍚庨亶鍘嗛鍑?br />
});
灝嗗驚鐜脊鍑猴細
index:0 value:1 array.length錛?
index:1 value:3 array.length錛?
index:2 value:5 array.length錛?
11銆丒xt.combine(arg1,arg2..argn) : Array //璇ユ柟娉曞湪Ext2涓嶆帹鑽愬啀浣跨敤
鐢ㄤ簬瀹炵幇瀵規暟緇勭殑鍚堝茍錛屽鏋滄槸瀛楃涓插垯浣滀負鍙湁涓欏圭殑鏁扮粍鍚堝茍銆?br />
濡?var a1=[1,3,5],b1=["a","b","c"];var c1="xxyznbde";
Ext.combine(a1,b1,c1) 榪斿洖[1,3,5,a,b,c,xxyznbde]
12銆丒xt. escapeRe( String str ) : String
灝嗗睘浜庢鍒欓噷鐨勭壒孌婂瓧絎﹁繘琛岃漿涔夈?br />
濡?Ext.escapeRe("(ab)$\sa342{}[dd]")灝嗚繑鍥瀄(ab\)\$sa342\{\}\[dd\]銆?/p>
13銆丒xt.callback(cb, scope, args, delay) :void //璇ユ柟娉曚負Ext鐨勫唴閮ㄦ柟娉?br /> 璋冪敤涓涓嚱鏁版垨寤惰繜璋冪敤涓涓嚱鏁般?br /> Cb:璋冪敤鐨勫嚱鏁般?br /> scope:cb涓璽his鎸囬拡銆?br /> args錛氫紶濡俢b鐨勫弬鏁幫紝浠ユ暟緇勫艦寮忚〃紺恒?br /> delay錛氬歡榪熷灝戞縐掓墽琛宑b銆?br /> 濡?Ext.callback(function(x,y){alert(x+y)},this,[3,5],1000);灝嗕簬1縐掗挓鍚庡脊鍑?錛屽嵆3+5鐨勭粨鏋溿?/p>
14銆丒xt.getDom( Mixed el ) : HTMLElement鏍規嵁浼犲叆鐨刬d/dom鑺傜偣/Ext鐨凟lemenet瀵硅薄錛岃繑鍥炲叾dom瀵硅薄銆?br />
濡俛lert(Ext.getDom("a").innerHTML);鎴?br />
alert(Ext.getDom(document.getElementById("a")).innerHTML);
灝嗚繑鍥瀒d涓篴鐨勫厓绱犵殑innerHTML鍐呭銆?/p>
15銆丒xt.getDoc()/Ext.getBody() : Ext.Element鍒嗗埆榪斿洖欏甸潰鐨刣ocument瀵硅薄鍜宐ody瀵硅薄錛岃繑鍥炲間負Ext鐨凟lement瀵硅薄錛岃岄潪Dom瀵硅薄銆?
16銆丒xt.getCmp( String id ) : Ext.Component鏍規嵁浼犲叆鐨刪tml鍏冪礌id榪斿洖璇ュ厓绱犵殑緇勪歡綾誨瀷錛岃繑鍥炲間負Ext鐨凜omponent瀵硅薄銆?br /> 蹇呴』淇濊瘉璇d瀵硅薄鐨勫厓绱犳槸Ext鐨勪竴涓唴閮ㄧ粍浠訛紙閫氳繃Ext鍒涘緩鐨勭粍浠訛級錛屽惁鍒欎粈涔堥兘涓嶈繑鍥炪?/p>
17銆丒xt.num( Mixed value, Number defaultValue ) : Number
楠岃瘉value鏄惁鏄竴涓暟瀛楋紝濡傛灉鏄垯鐩存帴榪斿洖鍚﹀垯榪斿洖defaultValue銆?br />
濡?alert(Ext.num(5,7))榪斿洖5錛宎lert(Ext.num("5",7)) 榪斿洖7
18銆丒xt.destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void閿姣佸垱寤虹殑Element鎴栫粍浠?Component)錛屽嵆閿姣佸叾鎵鏈夌殑浜嬩歡鐩戝惉錛宒om鑺傜偣錛屽茍璋冪敤瀵硅薄鏈韓鐨刣estory鏂規硶錛堝鏋滃瓨鍦ㄧ殑璇濓級錛屼紶鍏ョ殑鍙傛暟綾誨瀷涓篍xt.Element鎴朎xt. Component錛屽彲浠ヤ竴嬈℃т紶鍏ュ涓璞¤繘琛岄攢姣併?br /> 濡?Ext.destory(menu,el,Button);浼氶攢姣乵enu,el,Button涓変釜瀵硅薄銆?/p>
19銆丒xt.removeNode(htmlElement el): void //Ext鍐呴儴鏂規硶
鍒犻櫎鎸囧畾鐨刣om鑺傜偣銆備紶鍏ュ弬鏁頒負dom瀵硅薄銆?br />
濡?Ext.removeNode(document.getElementById("ab"));
20銆丒xt.type( Mixed object ) : String榪斿洖浼犲叆鐨勫璞$殑綾誨瀷銆?br />
鍖呮嫭濡備笅綾誨瀷錛?br />
string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace
濡?Ext.type("ab")榪斿洖string
Ext.type(20)榪斿洖number
Ext.type([3,5,6])榪斿洖array
Ext.type(/reg/)榪斿洖regexp
Ext.type(document.body)榪斿洖element銆?/p>
21銆丒xt.isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean媯鏌ヤ竴涓兼槸鍚︿負null/undefined鎴栨槸鍚︽槸絀猴紝濡傛灉鏄垯榪斿洖true銆?br /> 濡傛灉浼犲叆allowBlank涓簍rue錛屽垯鍙鏌ユ槸鍚︿負null鎴杣ndefined銆?br /> 濡傦細 Ext.isEmpty("a")榪斿洖false錛?br /> Ext.isEmpty("")榪斿洖true錛?br /> Ext.isEmpty("",true)榪斿洖false錛?br /> Ext.isEmpty(null)榪斿洖true銆?/p>
22銆丒xt.value(String v,String defaultValue[,[Boolean allowBlank]):String //Ext鍐呴儴鏂規硶
媯鏌鏄惁鏄負null/undefined鎴栫┖錛屽鏋滄槸鍒欒繑鍥瀌efaultValue錛屽惁鍒欒繑鍥瀡銆傚鏋渁llowBlank鍙傛暟涓簍rue錛屽垯鍏佽v涓虹┖錛堝嵆褰搗涓虹┖鏃朵笉榪斿洖defaultValue鑰岃繑鍥炵┖錛夈?nbsp;
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1901694