主要的组件: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:'保存'}
]
});
});
分享到:
相关推荐
10.3. 在form中使用fckeditor A. 常见问题乱弹 A.1. ext到底是收费还是免费 A.2. 怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来...
tapestry4.02中封装ext的TabPanel组件
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。
博文链接:https://jfp.iteye.com/blog/178889
extjs4.2.1 tabPanel刷新及关闭标签
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
treepanel 和 tabpanel 合在一起使用,可直接使用
3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习...
竖向标签TabPanel-------------------------------------------------
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...
制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有...
ext的tabpanel的激活与注意事项,激活的代码实现
Ext官方网站+中文教程 无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和...
TabPanel的使用,添加tab,加载页面,添加事件
1、Ext.TabPanel简单使用 代码: