`
897371388
  • 浏览: 523304 次
文章分类
社区版块
存档分类
最新评论

ext2.0中组件(panel,tabPanel,button,window)的使用(3)

 
阅读更多

主要的组件: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");



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











分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics