主要的组件:panel,tabPanel,button,window 的使用
1. 面板Ext.Panel 的使用
参数配置:
new Ext.Panel({
title:"面板",
html:"面板内容",
height:100}
);
使用:
var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello"> </div>
可以省掉变量obj,直接写成如下的形式:
var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
panel.render("hello");
render 方法后面的参数表示页面上的div 元素id,也可以直接在参数中通过renderTo 参数来省略手动谳用render 方法,只需要在构造函数的参数中添加一个renderTo 属性即可,
如下:
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[{pressed:true,text:'刷新'}]
});
2. 容器 Ext.TabPanel 的使用
var panel=new Ext.TabPanel({
width:300,
height:200,
items:[
{title:"面板1",height:30},
{title:"面板2",height:30},
{title:"面板3",height:30}
]});
panel.render("hello");
下述代码和上面的等价:
var panel=new Ext.TabPanel({
width:300,
height:200,
items:[
new Ext.Panel( {title:"面板1",height:30}),
new Ext.Panel({title:"面板2",height:30}),
new Ext.Panel({title:"面板3",height:30})
]});
panel.render("hello2");
var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});
<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />
Ext.get("btnAlert")得到一个与页面中按钮btnAlert 关联的Ext.Element 对象,可以直接调用该对象上的addListener 方法来给对象添加事件:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});
ExtJS 还支持事件延迟处理或事件处理缓存等功能,比如下面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
调用addListener 的时候传递指定的delay 为2000
5.window
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口",
height:200,
width:300
});
win.on("beforedestroy",function(obj){
alert("想关闭我,这是不可能的!");
obj.show();
return false;
});
win.show();
});
执行上述的程序,你会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明,如下面的代码与前面实现的功能一样:Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口",
height:200, width:300,
listeners:{"beforedestroy":function(obj){
alert("想关闭我,这是不可能的!");
obj.show(); return false;
}}
});
win.show();});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tools:[
{id:"save"},
{id:"help", handler:function(){Ext.Msg.alert('help','please help me!');}},
{id:"close"}
],
tbar:[{pressed:true,text:'刷新' }]
});
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[new Ext.Toolbar.TextItem('工具栏:'),
{xtype:"tbfill"},
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
]
});
});