1、Panel
很容易就可以做写出一个panel
var pnl = new Ext.Panel({
title:"panel标题",
width:300,
height:200,
renderTo:"test1" //这句把本窗口绑在id为test1的div或其它dom结点上
});
下面来美化一下:
加上frame:true 就会使窗口边框变得平滑,panel内部背景变成和谐的淡蓝色。
加上collapsible:true 就会在右上角多出个按钮,点击可以收缩
加上html:"<h1>Hello, lingyibin</h1>"可以在上面添加html文本
加上autoLoad:"MyJsp.jsp"可以加载其它页面到上面显示
底部工具条和顶部工具条分别用bbar 和tbar,设置右上角的小按钮用tools,这些在下面代码中都有示例
var pnl = new Ext.Panel({
title:"窗口",
width:300,
height:200,
collapsible:true,
//titleCollapse:true,
renderTo:"test1",
//frame:true, //有这,窗口才会显得更酷
//html:"<h1>Hello, lingyibin</h1>"
autoLoad:"MyJsp.jsp", //从另一个页面中加载数据,不过,只能加载文本数据
bbar:[{text:"底部按钮1",handler:function(){alert("OK");}},{text:"底部按钮2"}],
tbar:[{text:"顶部按钮1"},{text:"顶部按钮2"}],
tools:[{id:"save"},{id:"help"},{id:"close",handler:function(){alert("关啦!");pnl.hide();}}]
});
其中tools里面id的内容还包括:
toggle (collapsable 为 true 时的默认值)
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
2、Window
一个简单的window也可以用很简单的代码来实现 :
var win = new Ext.Window({
title:"window标题",
width:300,
height:200
});
win.show(); //window要用show()来使它显示出来
中间那一块的背景色和周围不和谐,没关系,用plain:true 就可以把整体的背景色调为一致
在中间加上tabpanel,最后变成如下的样子:
var win = new Ext.Window({
title:"window标题",
width:300,
height:200,
closeAction:"hide", //枚举值为:close(默认值),当点击关闭后,关闭 window 窗口
//hide,关闭后,只是 hidden 窗口
closable:true, //其实这是默认值,这句话可以去掉
modal:true, //设置为模式窗口
items:new Ext.TabPanel({
border:false,
activeTab:0,
items:[{title:"tab1"},{title:"tab2"}]
}),
plain:true
//contentEl:"test1"
});
win.show();
- 大小: 5.7 KB
- 大小: 4 KB
- 大小: 6 KB
分享到:
相关推荐
Ext.Panel API翻译 -------Window属性
2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之...
- 0000413: Maximized ExtWindow can't return to normal size - 0000697: UniPanel: Caption Alignment - 0000696: UniPanel: Caption - 0000699: UniPageControl: TabSheet is visible when TabVisible=False ...
1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....
即:Ext.window 4.mainPage.html为tab布局,右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test....
8.4.4 状态管理:ext.state.manager、ext.state.provider、ext.state.local-storageprovider和ext.state.cookieprovider / 426 8.5 综合实例 / 426 8.5.1 使用子模板 / 426 8.5.2 递归调用模板 / 428 8.6 本章...
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
ExtJS中窗口是由Ext.Window类定义,该类继承自Panel,因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。
ext designer 设计实例 实例包括form window grid listview panel dataview tabs
-删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)...
-删除Panel的EnableLightBackgroundColor属性,同时EnableBackgroundColor只支持Blue和Gray两种Theme。 +2010-01-31 v2.2.0 -使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)...
即:Ext.window 4.mainPage.html为tab布局,右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
[InstanceOf("Ext.Window")] Example (New) public override string InstanceOf { get { return "Ext.Window"; } } 39. Removed [Layout] Attribute and replaced with new .LayoutType ...
extjs 打印局部层,打印弹出window,grid,panel等!
5.1.2 Ext.panel.Panel的主要功能 5.1.3 使用Ext.panel.Panel 5.2 标准布局类 5.2.1 Auto自动布局 5.2.2 Fit自适应布局 5.2.3 Accordion折叠布局 5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute...
一、属性(构造参数) baseCls:”x-plain” Panel背景色颜色。... 二、应用举例 代码如下: Ext.onReady(function(){ new Ext.Window({ title:”新增”, width:500, height:400, plain:true, layout:”form”, labelW
二、Ext.Window类 85 三、实现Window的最小化功能 87 四、小结 91 第十五章:Panel的子类——FormPanel 93 一、无处不在的表单 93 二、Ext.form.FormPanel类 93 三、提交表单至服务器 97 四、小结 100 第十六章:更...
卷 (USB)Project 的文件夹 PATH 列表 卷序列号码为 0006EE44 CCBE:F425 I:. │ .project │ pom.xml │ pom.xml~ │ text.txt │ ├─.settings │ org.maven.ide.eclipse.prefs ...│ │ org.eclipse.wst.common....
天介绍一下Ext中组件举几个简单的例子做说明。注意:文章内容有些摘自本人学习过程中看到的资料。 Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件。...