ext学习_组件的使用（三） _Web前端

ext学习_组件的使用（3）

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");

3.按钮Ext.Button

var b=new Ext.Button({
text:"添加",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});

4.事件处理，onclick事件

<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();});

6. 工具栏toolBar

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:'保存'}
		]
	});
});