02_Ext_Panel
1,面板由以下几个部分组成,
一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。
面板类中还内置了面板展开、关闭等功能,并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它组件。
面板的类名为Ext.Panel,其xtype为panel
2,知识点:
render()方法 ,后面的参数可以是 一个字符串代表Id,或dom节点,或Ext.get()返回的Element
handler()方法,当按钮点击时,会触发handler方法
面板主区域body,可以放 html 字符串,也可以放 items指定的组件
我们可以在面板中动态添加、更改、删除组件或者里面的html. (参考下面的例子)
3, 示例
Ext.onReady(function(){ //Panel 面板 是可视化的容器组件 var panel=new Ext.Panel({ width:500, height:400, collapsible:true, //可展开和收缩 tools:[{id:"save"}, {id:"print",handler:function(){ window.print(); }}], //面板头部 header title:'我的面板', //顶部工具栏 toptoolbar tbar:[{text:"保存"},"-",{text:"关闭"}], //使用 - 表示分割符 //底部工具栏 bottomtoolbar bbar:[{text:"添加内容", //当按钮点击时,会触发handler方法 handler:function(){ panel.add({title:'面板3'}); panel.doLayout(); //调用重新布局,才会显示出来面板 // 删除panel里面的东西 // remove的参数为 组件Id或者组件本身 var p2=panel.getComponent(1);// 获取Item中的组件 panel.remove(p2); }},{text:"更新内容", handler:function(){ panel.load("new.html"); panel.body.update("<h1>新内容</h1>"+new Date()); }}, ], //尾部区域 bottom buttons:[{text:"确定"},{text:"取消"}], //底部按钮的对齐方式 buttonAlign:"center", //面板的主区域 body //html:"<h1>面板的body区域</h1>" //加载其它页面的内容 //autoLoad:"aaa.html" //放其它的组件 xtype说明是什么组件,在面板中如果不指定,它的xtype就是panel items:[{xtype:"button",text:"按钮"}, {title:"面板2",height:200,border:false}], }); //render()方法 ,后面的参数可以是 一个字符串代表Id,或dom节点,或Ext.get()返回的Element // panel.render(document.body); // panel.render("p"); panel.render(Ext.get("p")); });
02_Ext_Panel的更多相关文章
随机推荐
- How to resolve the truncate/drop/delete/join hang issue in ADW
In some case, we found that when we execute the sql commands like truncate table, drop table, delete ...
- centos下安装jenkins
To use this repository, run the following command: sudo wget -O /etc/yum.repos.d/jenkins.repo https: ...
- JavaScript入门(三)
循环结构的执行步骤 1.声明循环变量: 2.判断循环条件: 3.执行循环体操作: 4.更新循环变量: 然后循环执行2~4,直到条件不成立时,跳出循环. [While循环] while循环()中的表达式 ...
- 关于transient和static的序列化和反序列化
做java开发有段时间了,最近没那么忙了,抽了点时间看了下java的源码 . 在读源码的时候看到了一个 transient 修饰的变量 ,字面意思是瞬变的.在以前的开发过程中也没用到过这个修饰语,查了 ...
- 电源库(Sources)
- LeetCode Weekly Contest 47
闲着无聊参加了这个比赛,我刚加入战场的时候时间已经过了三分多钟,这个时候已经有20多个大佬做出了4分题,我一脸懵逼地打开第一道题 665. Non-decreasing Array My Submis ...
- JavaScrpt笔记之第三天
1.JavaScriot代码规范 代码规范通常包括以下几个方面: 变量和函数的命名规则 空格,缩进,注释的使用规则. 其他常用规范-- 规范的代码可以更易于阅读与维护. 2.命名规则 一般很多代码语言 ...
- 【NOIP2014】子矩阵
这题如果按暴力做只有一半分,最大时间复杂度为O(C(16,8)*C(16,8)); 很容易算出超时: 我们可以发现如果直接dp会很难想,但是知道选哪几行去dp就很好写状态转移方程: dp[i][j]= ...
- Ext.Msg.alert添加确定按钮
Ext.Msg.alert('成功','成功!!', function(btn){ if(btn!=null{//btn=='ok'||btn=='cancel' ... } });
- keepalive集群工作原理及应用
author:JevonWei 版权声明:原创作品 集群工作原理 一.集群基础 1.系统的扩展方式 scale up向上扩展:提高单台服务器的性能 scale out向外扩展:多台服务器联合起来满足同 ...