ext学习_组件(panel,tabPanel,button,window)的使用


		主要的组件：panel,tabPanel,button,window 的使用
1. 面板Ext.Panel 的使用
参数配置：
[html] 
new Ext.Panel({  
title:"面板",  
html:"面板内容",  
height:100}  
);  
 
使用：
[html] 
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，直接写成如下的形式：
[html] view plaincopyprint?
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 属性即可，
如下：
[html]  
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});  
 
复杂的面板的使用：
[html]  
new Ext.Panel({  
         renderTo:"hello",  
         title:"面板头部header",  
         width:300,  
         height:200,  
         html:'<h1>面板主区域</h1>',  
         tbar:[{text:'顶部工具栏topToolbar'}],  
         bbar:[{text:'底部工具栏bottomToolbar'}],  
         buttons:[{text:"按钮位于footer"}]  
});  
 
[html] 
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 的使用 
[html] 
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");  
下述代码和上面的等价：
[html] 
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");  
 
 
3.按钮Ext.Button
[html] 
var b=new Ext.Button({  
text:"添加",  
pressed:true,  
heigth:30,  
handler:Ext.emptyFn  
});  
 
4.事件处理，onclick事件
[html] 
<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 方法来给对象添加事件：
[html] 
Ext.onReady(function(){  
Ext.get("btnAlert").on("click",a);  
Ext.get("btnAlert").on("click",a);  
});  
ExtJS 还支持事件延迟处理或事件处理缓存等功能，比如下面的代码：
[html] 
Ext.onReady(function(){  
Ext.get("btnAlert").on("click",a,this,{delay:2000});  
});  
调用addListener 的时候传递指定的delay 为2000
 
5.window
[html] 
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();  
});  
执行上述的程序，你会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明，如下面的代码与前面实现的功能一样：
[html]  
Ext.onReady(function(){  
   var win=new Ext.Window({  
   title:"不能关闭的窗口",  
   height:200, width:300,  
   listeners:{"beforedestroy":function(obj){  
   alert("想关闭我，这是不可能的!");  
   obj.show(); return false;  
}}  
});  
win.show();});  
 
6. 工具栏toolBar 
[html]  
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!');}},  
    &

补充：web前端 , JavaScript ,