Ext.Window 的常见属性:
plain:true,(默认不是)
resizable:false,(是否可以改变大小,默认可以)
maximizable:true,(是否增加最大化,默认没有)
draggable:false,(是否可以拖动,默认可以)
minimizable:true,(是否增加最小化,默认无)
closable:false,(是否显示关闭,默认有关闭)
//几个前面没有介绍的参数
1.closeAction:枚举值为:close(默认值),当点击关闭后,关闭window窗口 hide,关闭后,只是hidden窗口
3.constrain:true则强制此window控制在viewport,默认为false
4.modal:true为模式窗口,后面的内容都不能操作,默认为false
5.plain://true则主体背景透明,false则主体有小差别的背景色,默认为false
而pannel 和window是差不多的,比如构造参数我都可以直接通用:
一些常见配置参数:
1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false
3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false
4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为right
8.collapsible:设为true,显示右上角的收缩按钮,默认为false
9.draggable:true则可拖动,但需要你提供操作过程,默认为false
10.html:主体的内容
11.id:id值,通过id可以找到这个组件,建议一般加上这个id值
12.width:宽度
13.height:高度
13.title:标题
14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.
15.applyTo:(id)呈现在哪个html元素里面
16.contentEl:(id)呈现在哪个html元素里面,把el内的内容呈现 (如:contentEI='config' <div id="config">...</div>
17.renderTo:(id)呈现在哪个html元素里面
eg:
Ext.onReady(function()
{
var panel = new Ext.Panel(
{
title:"标题",
width:300,
height:200,
//frame:true,//圆角
plain:true,//方角 默认
collapsible:true,
tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")}},{text:"按钮2"}], //顶部工具栏
bbar:[{text:"按钮3"},{text:"按钮4"}], //底部工具栏
html:'<h1>hello,my name is 274!</h1>',
buttons:[{text:"按钮5"},{text:"按钮6"}], //footer部工具栏
buttonAlign:"left"
});
//win.show();
panel.render("hello");
});
Tabpanel 使用:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<title>学习ExtJS之Panel</title>
<script type="text/javascript">
Ext.onReady(function()
{
var tabs = new Ext.TabPanel({
renderTo: 'hello',
width:450,
//height:200,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:'script', title: '子面板1'},
{contentEl:'markup', title: '子面板2'}
]
});
var tabs2 = new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
html: "My content was added during construction."
},{
title: 'Ajax Tab 1',
autoLoad:'ajax1.htm'
},{
title: 'Ajax Tab 2',
autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
},{
title: 'Event Tab',
listeners: {activate: handleActivate},
html: "I am tab 4's content. I also have an event listener attached."
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});
function handleActivate(tab)
{
alert(tab.title + ' was activated.');
}
});
</script>
</head>
<body style="padding:10px;">
<div id="hello">
</div>
<div id="script" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
</div>
<div id="markup" class="x-hide-display">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
</div>
<br>
</body>
</html>
对应的显示效果:
注意上面代码中使用了items 属性,表示子面板组。内容可以用html 元素ID 。比如:
items:[
{contentEl:'script', title: 'Short Text'},
{contentEl:'markup', title: 'Long Text'}
]
这样这两个子面板的内容将是ID为sript 和markup 的元素内容。
也可以,以html属性直接表示子面板的内容:
items:[
{html:'script', title: 'Short Text'},
{html:'markup', title: 'Long Text'}
]
语句解释: defaults:{autoHeight: true}, 默认自适应高度。当然这里面还可以设置为: defaults:{autoScroll: true},如果设置为 defaults:{autoScroll: true},高度就最好指定了。
下面还有一个tab面板,其子面板更多了。
我们发现renderTo 不仅可以绑在div (id) 也可以绑定在:document.body。
而其中比较特别的有:
1.autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
指切换到这个页面,内容显示为动态加载的,比如这里用了一个ajax方式,url 发送目标,params是参数形式。
2.listeners: {activate: handleActivate},
当面板切换到这个页面将触发事件:handleActivate
3.disabled:true,
指这个页面不能点击。
对于: plain:true, frame:true,
前者是子面板标题处样式,前者并无背景,后者有背景(看起来像个框架),请参看上图二者效果差异。
而activeTab:0 是指,默认显示(访问)的是哪一个子面板。0是第一次,如果不指定该属性,默认不显示子面板内容,只有当用户点击子面板后才显示。
分享到:
相关推荐
一个简单的Ext.Window中插入图片的例子,让您轻松掌握在Ext.Window中插入图片(照片)。
从右下角动态弹出window,显示1分钟后自动隐藏,然后再弹出,类似MSN登录提醒。
Ext.window的一个扩展组件SuperWin.js.可灵活自主随意定位,和显示模式;
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
Ext.Panel API翻译 -------Window属性
EasyExt_003_第一个组件Ext.Window EasyExt_003_第一个组件Ext.Window
org.restlet.ext.spring.jar
Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
环境:Window XP Sp2、Tomcat 6.0、...关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们框架系统是非常有帮助的。本示例代码注释非常详细。 阅读对象:需要使用Ext框架进行Web开发的人员
运行Microsoft office时,vbe6ext.olb不能加载
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext.get与Ext.fly的区别与用法
Ext.data.Store的基本用法 Ext.data.Store的基本用法 Ext.data.Store的基本用法
NULL 博文链接:https://oppovaan.iteye.com/blog/627655
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
Ext.js 3.0中文API和Ext.js中文教程打包下载
var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext....