问题原因Q?br /> 1Qjs代码用了javas
4.上传囄时提C：Object doesn't support this property or method
原因Q服务器上安装的AspJpeg的版本低?.4版?br /> 解决ҎQ安?.4或以上版本的AspJpeglg?
]]>
Introduction
ExtBuilder is an eclipse plugin can help developer work out good style Ext javascript code without typing code.
Installation
Eclipse 3.x
- make sure you eclipse version is 3.2,3.3 or 3.4 with GEF installed.
- download archived update site from http://code.google.com/p/extbuilder/downloads/list
- Click Help->Software Updates->Find and Install...->Search for new features to install,Click Next
- Click New Archived Site-> Browse to extbuilder_update.zip and click Open.
- Click OK and follow the instructions to install.
- Restart you eclipse
Apatana
- Install Apatanta as a plugin to Eclipse.
- Install ExtBuilder to Eclipse
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
- Click Windows->Preferences..->ExtJs Builder
- Click Browse button to select your Ext home directory.
- Click File->New, then select Web->ExtJs Page. a wizard dialog will appear.
- Click Next
- Input the namespace you want
- Input class name you want, extbuilder create one class in one file, just like Java
- Input the file name, default is the class name
- Select super class, default is Ext.Panel, you also can create a window by select Ext.Window
- Click Finish.
- Then there are two files created in Package Explorer, for example: CorpSelectPanel.ext and CorpSelectPanel.js. The first file is used by extbuilder, the second file is the script file for you.
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.
- Create a new Ext page
- Set the root panel's tilte to 'ParentPanel'
- Add a Panel to page root panel component
- Set the child panel's title to 'ChildPanel'
- Click the parent panel on outline view
- Set the parent panel's layout to 'Border'
- Click the child panel on outline view
- Set the child panel's region to 'center'
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
- Create a new Ext page
- Add a FormPanel to root panel
- Set the FormPanel's layout to 'column'
- Add two Panels to FormPanel, set columnWidth to '.5'
- Set these two Panels's layout to 'form'
- Add 4 TextField to these Two Panel, each have two
Then you get a two column form panel
Toolbar
Each Ext Panel has two toolbars, tbar and bbar.
- Click one Panel of Outline view.
- Click Properties view, scroll to tbar or bbar property
- Click the right side button '...' to show Toolbar Settings Dialog
- In Toolbar Settings Dialog, click Add Button(+) to add Button,Separator,Spacer,Fill,TextItem and MenuButton. Menu editing is not ready in current version.
- Change the text toolbar text, by default, the handler is as "onButtonTextClick". Of course, you can change the handler function name.
- Then switch to Source code Editor, see what happened.
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.
- Click '...' button to show Store Settings Dialog
- Select MemoryProxy in Basic Page
- Click Sample button to generate some random data
- Click OK button to save store settings.
- Add loadData function in class
loadData : function() { this.store1.load(); }
here store1 is the component name of store.
- Add code in class constructor function
system.CorpSelectPanel = function(config) { Ext.applyIf(this, config); this.initUIComponents(); system.CorpSelectPanel.superclass.constructor.call(this); //load store data here this.loadData(); };
Now, you can see the data at preview page.
]]>
]]>
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、Ext.apply(Object obj, Object config, Object defaults ) : Object
config中的所有属性复制到obj中，如果配置了defaultsQ则先将defaults中的属性传入objQ然后再config中属性传入，一般defaults用于定义一些默认倹{?br />
注意Q每个参数都必须是对象objectQ而不能是function或其他?br />
创徏object可以通过new function(){}、new Object()、{}{方法创建?/p>
2、Ext.emptyFn: Function
用于q回一个空函数Q便于在E序中创建空函数。Ext.emptyFnq回function(){}
3、Ext.applyIf(Object obj, Object config) : Object功能如同Ext.apply,但是只把config中存在而obj不存在的属性复制过厅R?/p>
4、Ext.addBehaviors( Object obj ) : void为页面中一个或多个元素d事g
元素使用css规则查找Q其中元素与事g用@隔开 Ext.addBehaviors({
//为id为foo的元素下的所有a元素dclick事g
'#foo a@click' : function(e, t){
// do something
},
// 为多个选择器添加相同的事g(mouseover)。在@之前使用逗号分开
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
5、Ext.id( [Mixed el], [String prefix] ) : String
q回一个唯一的id倹{?br />
如果只需要获取一个唯一的id|则直接调用Ext.id()Q?br />
如果需要ؓ某个元素讑֮一个唯一的id值ƈq回id则调用Ext.id(el)Qel为元素Id、Dom对象或Ext的Element对象?br />
如果需要指定特定的前缀Q则需要传入第二个参数Q如Ext.id(el,”myPrix-”)Q默认前~为ext-genQ如默认q回id可能为ext-gen4Q指定了前缀后可能返回myPrix-4?/p>
6、Ext.extend( Object subclass, Object superclass, [Object overrides] ) : void实现对象l承Q目前还不太了解具体原理 Q？Q?/p>
7、Ext.namespace( String namespace1, String namespace2, String etc ) : void
创徏命名I间Q?br />
如Ext.namespace("Company","MyNS.mydata","Data.format.string")
然后可以创徏如MyNS.mydata.doit=function(){…}的接?br />
注：命名I间的简易调用：Ext.ns()Q在Ext Api中未l出此用法?/p>
8、Ext.urlEncode( Object o ) : String一个json对象转换Uurl参数Ԍ支持通过数组Z个参数设定多个倹{?br /> 如将{a:1,b:2,c:[1,3,5,7]}转换为a=1&b=2&c=1&c=3&c=5&c=7
9、Ext.urlDecode( String string, [Boolean overwrite] ) : Objecturl参数串{换ؓjson对象Qoverwrite如果为trueQ则后面的同名参数D盖前面的同名参数|默认为false即不覆盖而以数组形式q回Q?br />
?Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7")
q回的对象内容ؓ{a:1,b:2,c:[1,3,5,7]}
Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7",true)
q回{a:1,b:2,c:7}
10、Ext.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void遍历arrayq对每项分别调用fn函数。如果array不是数组则只执行一ơ?br />
如果某项fn执行l果q回falseQ必LfalseQundefined无效Q，遍历退出，后面的array将不被遍历?br />
遍历q程中每ơؓfn传入参数分别为[当前数组]Q[当前索引]和[数组array]三个参数?br />
Scope用于讑֮fn函数中的this指针?br />
?Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.lengthQ?+a.length)
});
@环弹出：
index:0 value:1 array.lengthQ?
index:1 value:3 array.lengthQ?
index:2 value:5 array.lengthQ?
index:3 value:7 array.lengthQ? Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.lengthQ?+a.length);
return v!=5; //到第三项后遍历退?br />
});
@环弹出：
index:0 value:1 array.lengthQ?
index:1 value:3 array.lengthQ?
index:2 value:5 array.lengthQ?
11、Ext.combine(arg1,arg2..argn) : Array //该方法在Ext2不推荐再使用
用于实现Ҏl的合ƈQ如果是字符串则作ؓ只有一的数组合ƈ?br />
?var a1=[1,3,5],b1=["a","b","c"];var c1="xxyznbde";
Ext.combine(a1,b1,c1) q回[1,3,5,a,b,c,xxyznbde]
12、Ext. escapeRe( String str ) : String
属于正则里的特D字W进行{义?br />
?Ext.escapeRe("(ab)$\sa342{}[dd]")返回\(ab\)\$sa342\{\}\[dd\]?/p>
13、Ext.callback(cb, scope, args, delay) :void //该方法ؓExt的内部方?br /> 调用一个函数或延迟调用一个函数?br /> Cb:调用的函数?br /> scope:cb中this指针?br /> argsQ传如cb的参敎ͼ以数lŞ式表C?br /> delayQgq多毫U执行cb?br /> ?Ext.callback(function(x,y){alert(x+y)},this,[3,5],1000);于1U钟后弹?Q即3+5的结果?/p>
14、Ext.getDom( Mixed el ) : HTMLElementҎ传入的id/dom节点/Ext的Elemenet对象Q返回其dom对象?br />
如alert(Ext.getDom("a").innerHTML);?br />
alert(Ext.getDom(document.getElementById("a")).innerHTML);
返回id为a的元素的innerHTML内容?/p>
15、Ext.getDoc()/Ext.getBody() : Ext.Element分别q回面的document对象和body对象Q返回gؓExt的Element对象Q而非Dom对象?
16、Ext.getCmp( String id ) : Ext.ComponentҎ传入的html元素idq回该元素的lgcdQ返回gؓExt的Component对象?br /> 必须保证该id对象的元素是Ext的一个内部组Ӟ通过Ext创徏的组ӞQ否则什么都不返回?/p>
17、Ext.num( Mixed value, Number defaultValue ) : Number
验证value是否是一个数字，如果是则直接q回否则q回defaultValue?br />
?alert(Ext.num(5,7))q回5Qalert(Ext.num("5",7)) q回7
18、Ext.destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void销毁创建的Element或组?Component)Q即销毁其所有的事g监听Qdom节点Qƈ调用对象本n的destoryҎQ如果存在的话）Q传入的参数cd为Ext.Element或Ext. ComponentQ可以一ơ性传入多个对象进行销毁?br /> ?Ext.destory(menu,el,Button);会销毁menu,el,Button三个对象?/p>
19、Ext.removeNode(htmlElement el): void //Ext内部Ҏ
删除指定的dom节点。传入参Cؓdom对象?br />
?Ext.removeNode(document.getElementById("ab"));
20、Ext.type( Mixed object ) : Stringq回传入的对象的cd?br />
包括如下cdQ?br />
string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace
?Ext.type("ab")q回string
Ext.type(20)q回number
Ext.type([3,5,6])q回array
Ext.type(/reg/)q回regexp
Ext.type(document.body)q回element?/p>
21、Ext.isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean查一个值是否ؓnull/undefined或是否是I，如果是则q回true?br /> 如果传入allowBlank为trueQ则只检查是否ؓnull或undefined?br /> 如： Ext.isEmpty("a")q回falseQ?br /> Ext.isEmpty("")q回trueQ?br /> Ext.isEmpty("",true)q回falseQ?br /> Ext.isEmpty(null)q回true?/p>
22、Ext.value(String v,String defaultValue[,[Boolean allowBlank]):String //Ext内部Ҏ
查v是否是ؓnull/undefined或空Q如果是则返回defaultValueQ否则返回v。如果allowBlank参数为trueQ则允许v为空Q即当v为空时不q回defaultValue而返回空Q?nbsp;
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1901694
]]>