1、Panel面板的概述
面板Panel是ExtJS控件的基础,很多高级控件都是在面板的基础上扩展的,还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。
2、面板的5大组成部分
面板由以下几个部分组成,一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能,并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它组件。
面板的类名为Ext.Panel,其xtype为panel,下面的代码可以显示出面板的各个组成部分:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"面板头部header",
width:300,
height:200,
html:'<h1>面板主区域</h1>',
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
buttons:[{text:"按钮位于footer"}]
});
});
一般情况下,顶部工具栏或底部工具栏只需要一个,而面板中一般也很少直接包含按钮,一般会把面板上的按钮直接放到工具栏上面。比如下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source!</h1>',
tbar:[{pressed:true,text:'刷新'}]
});
});
3、面板的特点
面板Panel主要有下面几个特点:
1、面板可以理解成应用程序中的一个界面块,这个块可以大,也可以小,这一个块包含了特定的样式信息;
2、面板Panel继承自Container类,因此,面板是一个可视化容器组件;也是其它大多数可视化控件如TabPanel、Window、TreePanel的基类;
3、面板中即可包括其它元素组件,也可以包含特定html代码片段,可以在程序中动态更新面板中的内容;
4、面板由固定的5个部分组成,除了body部份以外,其它部分都不是必须的。
4、面板中的元素
如果要在面板中放置Ext组件或控件元素,则可以通过面板的items属性来指定,这个属性的值可以是一个数组,表示面板中有很多子元素,也可以是一个对象,表示面板中只定义一个子元素。当面板对象创建以后,可以通过面板容器的add、insert来动态往面板中增加子元素,用remove方法来在面板动态删除子元素。
5、面板中的HTML内容
面板中的内容也可以是指定的html片段,此时可以通过配置选项中html属性来指定。比如下面的代码:
Ext.onReady(function(){
var panel=new Ext.Panel({
title:"面板",
width:500,
height:300,
html:"<h1><font color='blue'>这是Ext的面板</font></h1>"
});
panel.render("test");
});
当然,如果面板中的html比较复杂,比如是说是一个动态页面的内容。此时可以通过在配置选项中设置autoLoad配置选项来指定自动加载指定url中的内容作为面板中显示的内容。比如下面的代码:
var panel=new Ext.Panel({
title:"面板",
width:500,
height:300,
autoLoad:{url:"index.html"}
});
也可以在对象初始化以后,动态更新面板中的html内容,可以通过调用面板的load方法实现,load方法中的参数与autoLoad配置选项中所代表的一样,代码如下:
panel.load({
url:"index.ejf",
params:{name:"daxia",pwd:"123"},
scope: this,
discardUrl: false,
nocache: false,
text: "正在加载,请稍候...",
timeout: 30,
scripts: true
});
6、面板中html内容的动态控制
这时候直接通过面板的body元素来实现面板的内容的更新。比如下面的代码:
panel.body.update("<h1><font color='blue'>这是Ext的面板</font></h1>",true,function(){});
update的第一个参数表示要更新的html字符串,第二个参数表示是否执行字符串中的脚本,第三个参数是指当内容已经更新完成后执行的回调函数。
分享到:
相关推荐
EXT dojochina 面板示例Ext.Panel.rar EXT dojochina 面板示例Ext.Panel.rar
创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展...
/* *CRUD面板基类 */ //继承EXT的Panel,创建CRUD面板 Mis.Ext.CrudPanel=Ext.extend(Ext.Panel,{……}); //限于篇幅就不列出全部代码 EXT里的继承用的是Ext.extend(组件名,{实现代码}); 要使用这个CRUD面板,...
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...
第九章 Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件 72 一、面板控件 Ext.Panel 72 二、窗口控件 Ext.window.Window 74 三、布局控件 Ext.container.Viewport 77 第十章 ...
9.3.3 面板标题栏构件:ext.panel.header与ext.panel.tool / 438 9.3.4 记录和恢复面板属性:ext.util.memento / 439 9.3.5 面板常用的配置项、方法和事件 / 439 9.4 布局 / 441 9.4.1 布局概述 / 441 9.4.2 ...
六、面板Ext.Panel.............................................................................................................. 12 面板Panel 简介..........................................................
5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext....
extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...
8.1.3 Panel的body的样式范围 224 8.2 Form表单组件 226 8.2.1 DisplayField控件 226 8.2.2 在FormPanel中使用TabPanel 229 8.2.3 DirectLoad与DirectSubmit 232 8.2.4 使用DirectSubmit上传文件 235 8.3 Grid组件 ...
var p=new Ext.Panel({ title:'测试面板', collapsible:true, renderTo:'base',//被渲染的对象,渲染的对象必须是ID width:400, html:'<b>内容</b>> <a>test</a>', tbar:[ {text:'新增'},{text:'修改'},...
5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext....
//创建面板 Ext.create(‘Ext.grid.Panel’, { title: ‘easy grid’, width: 400, height: 300, renderTo: Ext.getBody(), frame: true, viewConfig: { forceFit: true, stripRows: true }, store: {//配置数据...
第二十七章:选项卡面板——Ext.TabPanel 214 一、关于魅族和M8 214 二、TabPanel概述 214 三、TabPanel标签操作 216 四、标签弹出菜单 217 五、小结 220 第二十八章:Viewport类 221 一、概述 221 二、Viewport的...
一、Accordion布局由类Ext.layout.Accordion定义,表示可折叠的布局,点击每一个子元素的头部名称或右边的按钮,则会展开该面板,并收缩其它已经展开的面板。 layoutConfig:true表示在执行展开折叠时启动动画效果,...
ExtJS中窗口是由Ext.Window类定义,该类继承自Panel,因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。
ExtJs6的 mordern 版的【日历导航+月视图控件】里面的ajax部分需要自己根据自身系统的框架进行处理,详细的一些细节还没处理,整体逻辑可以参考。
Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 ...Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 Ext JS4学习教程+笔记(五)Form Panel的使用 Ext学习网址
1. Ext.onReady函数:在EXTJS库文件及页面内容加载完后,EXTJS会执行Ext.onReady中指定的函数。 2. 控件的使用:使用EXTJS提供的控件,如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等。 三、EXTJS控件 ...
ExtPlane面板2 由ExtPlane支持的用于飞行模拟器的外部联网驾驶舱面板,例如X-Plane,Condor和FlightGear。... X-Plane SDK不需要构建ExtPlane-Panel。 目标硬件是: 台式电脑 安卓 树莓派 任何会运行Qt的东西! 下载