一个基本完整的Ext.Panel应该包含title、tbar、bbar和主体部分。
下面是一个最简单的panel
<div id='p'></div>
<script type="text/javascript">
Ext.onReady(function(){
var _panel1 = new Ext.Panel({
title:"最简单的Ext.Panel",
width:400,
titleCollapse:true,
//True to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar,
//false to allow it only by clicking to tool button (defaults to false).
collapsible:true,
html:"妈妈这个是最简单的panel<br/>妈妈这个是最简单的panel<br/>妈妈这个是最简单的panel<br/>",
renderTo:"p"
});
var _tbar = new Ext.Toolbar({
});
});
</script>
下面是比较完整的panel
var _tbar = new Ext.Toolbar({
buttons : [ {
text : "新建",
handler : function() {
alert("tbar 新建按钮");
}
}, "-", {
text : "打开"
}, {
text : "保存"
} ]
});
var _bbar = new Ext.Toolbar({
buttons : [ {
text : "上一页"
}, {
text : "下一页"
} ]
});
var _panel2 = new Ext.Panel({
title : "有工具栏的panel",
width : 500,
titleCollapse : true,
collapsible : true,
html : "这个是带有工具栏的panel<br/>这个是带有工具栏的panel<br/>这个是带有工具栏的panel<br/>这个是带有工具栏的panel<br/>这个是带有工具栏的panel<br/>",
renderTo : "p1",
tbar : _tbar,
bbar : _bbar
});
- 大小: 44.9 KB
分享到:
相关推荐
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 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展...
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之...
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...
1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用...
ext Panel+toolbar+button 实作带注释 Tom 实作实例,推荐入门学习,不带Ext js lib,请自行加入
要么指定Panel的itemsitems,要么动态向Panel中添加Components 添加,要记得考虑 你希望Panel如何排列这些子元素,并且这些子元素是否需要使用Ext内建的layoutlayout规则调整尺寸。 默认情况下,Panel使用...
ext学习资料,包含工具栏,panel,等组件的使用以及配置.....相关实例.
Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 ...Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 Ext JS4学习教程+笔记(五)Form Panel的使用 Ext学习网址
二、应用举例 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:”人员信息”, renderTo:Ext.getBody(), width:500, height:200, layout:”table”, layoutConfig: { columns: 3 }, ite
xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:”textfiled”,表示使用Ext.form.TextFile来进行初始化当前组件。 xtype Class ————- ————...
二、应用举例 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:”人员信息”, renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:”accordion”, layout
一、 Form布局由类Ext.layout.FormLayout定义,名称为form,... 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:”人员信息”, renderTo:Ext.getBody(), frame:true, width:500, height:300, l
一、ExtJS 框架简介..............................................................十七、如何学习及掌握Ext..................................................................................................39
二、Ext.Panel类 78 三、小结 83 第十四章:Panel的子类——Window窗口 85 一、概述 85 二、Ext.Window类 85 三、实现Window的最小化功能 87 四、小结 91 第十五章:Panel的子类——FormPanel 93 一、无处不在的表单...
我不想教各位新手什么高级技术,因为我也在研究,只是想教大家一个思考的方向,能够具有举一反三的能力,能够真正学会Ext和开始深入了解。
Ext.Net学习笔记 ,主要用的控件的一些属性用法及意思。
二、应用举例 代码如下: Ext.onReady(function(){ new Ext.Panel({ renderTo:Ext.getBody(), title:”容器组件”, layout:”fit”, width:500, height:100, items:[{title:”子元素1″,html:”这是子元素1中的内容...