ExtJS 常用组件属性 及使用方法
来源:互联网 发布:淘宝客服接待人数 编辑:程序博客网 时间:2024/05/21 05:07
- /*
- Ext.Panel主要配置表:
- animCollapse Boolean 设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则false
- applyTo Mixed 面板定位
- autoDestroy Boolean 是否自动销毁从容器中移除组件(默认true)
- autoHeight Boolean 是否自动高度(默认false)
- autoLoad Object/String/Function 设置面板自动加载的url
- autoScroll Boolean 设置是否自动加载滚动条(默认false自动加滚动条)
- autoShow Boolean 是否移除组件的隐藏样式(默认flase)
- autoWidth Boolean 是否自动宽度(默认false)
- baseCls String 面板的基本样式类(默认x-panel)
- bbar Object/Array 设置面板底端工具栏,可是Ext.Toolbar,工具栏配置对象,button的数组
- bodyBorder Boolean 是否显示面板体内部边框(默认true,在border=true生效)
- bodyStyle String/Object/Function 应用于面板体的自定义样式(默认null)
- border Boolean 是否显示面板体边框(默认true,2px)
- buttonAlign String 设置面板底部按钮对齐方式(默认right,可为left,center)
- buttons Arry 设置面板底部按钮配置数组
- collapseFirst Boolean 该项决定展开收缩按钮的位置(默认true)
- collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态(默认true)
- collapsible Boolean 是否允许面板展开收缩(默认false)
- contentEI String 设置面板的内容元素,可为页面元素id,已存在的HTML节点
- defaultType String 面板中元素的默认类型(默认panel)
- defaults Object 应用到面板容器中所有元素配置对象,如:defaults:{bodyStyle:'padding:15px'}
- floating Boolean 设置面板是否可浮动(默认true,会导致面板显示负偏移,位置要明确设置!)
- footer Boolean 设置是否创建面板底部元素(默认true)
- frame Boolean 设置是否渲染面板
- header Boolean 设置是否创建头部(默认true)
- headerAsText Boolean 是否在面板header中显示title(默认true)
- height Number 面板高度(默认auto)
- hideBorders Boolean true隐藏面板中所有元素的边框,false据组件具体配置
- hideCollapseTool Boolean 设置当collapsible为true是,是否显示展开收缩按钮
- html String/Object 设置面板元素内容为HTML片段或DomHelper生成内容
- items Mixed 单独一个子组件或子组件数组
- layout String 面板布局类型(默认Ext.layout.ContainerLayout布局)
- layoutConfig Object 这个配置对象包含被选布局的配置项
- maskDisabled Boolean 设置当面板不可使用时是否遮罩面目(默认true)
- shadow Boolean/String 设置是否在面板后显示阴影(默认true)
- shadowOffset Number 设置面板阴影偏移量(默认4)
- tbar Object/Array 设置面板顶端工具栏,可是Ext.Toolbar,工具栏配置对象,button配置对象数组,面板
- 渲染后只能通过getTopToolbar方法访问该工具栏
- title String 显示在面板的头部标题信息
- titleCollapse Boolean 设置是否允许单击面板头部进行展开收缩(默认false)
- tools Array 面板头部工具按钮配置对象数组
- width Number 面板宽度(默认auto)
-
- tools配置表:
- id String 必选
- handler Function 单击按钮后出发的处理函数
- scope Object 处理函数执行范围
- qtip String/Object 为按钮指定提示信息
- hidden Boolean 设置初次渲染是否隐藏
- on Object 为按钮配置事件监听
-
- tools配置项id对应不同按钮
- */
- <mce:scripttype="text/javascript"><!--
- Ext.onReady(function(){
- var config = {
- title:'面板头部(hear)',
- tbar:['顶端工具栏(top toolbars)'],
- bbar:['底端工具栏(bottom toolbars)'],
- height:200,
- width:300,
- frame:true,
- renderTo:'panel',
- bodyStyle:'background-color:#ffffff',
- html:'面板体(body)',
- tools:[
- {id:'toggle'},
- {id:'close'},
- {id:'maximize'}
- ],
- buttons:[
- new Ext.Button({
- text:'面板底部(footer)'
- })
- ]
- }
-
- new Ext.Panel(config);
- });
-
1.通过autoLoad加载远程页面
- <mce:scripttype="text/javascript"><!--
- /*
- 使用autoLoad加载远程页面
- */
-
- Ext.onReady(function(){
- var config = {
- title:'面板加载远程页面',
- height:150,
- width:250,
- frame:true,
- autoScroll:true,
- collapsible:true,//允许展开和收缩
- applyTo:'panel',
- autoLoad:{url:'page1.html'},//自动加载面板体的链接
- bodyStyle:'background-color:#ffffff'
- }
-
- var panel = new Ext.Panel(config);
- });
-
- <mce:scripttype="text/javascript"><!--
- /*
- contentEI加载本地资源
- */
-
- Ext.onReady(function(){
- var config = {
- title:'面板加载本地数据',
- height:150,
- width:250,
- frame:true,
- collapsible:true,
- autoScroll:true,
- autoHeight:false,
- //autoHeight:true,
- renderTo:'panel',
- contentEl:'localElement',//要加载的本地资源的id,contentEl中l为小写的L!
- bodyStyle:'background-color:#ffffff'
- }
-
- new Ext.Panel(config);
- });
-
- <tableid='localElement'>
- <tr>
- <tdcolspan="2">远程页面</td>
- </tr>
- <tr>
- <tdwidth="60">编号</td>
- <tdwidth="80">姓名</td>
- </tr>
- <tr>
- <td>编号</td>
- <td>姓名</td>
- </tr>
- <tr>
- <td>编号</td>
- <td>姓名</td>
- </tr>
- <tr>
- <td>编号</td>
- <td>姓名</td>
- </tr>
- <tr>
- <td>编号</td>
- <td>姓名</td>
- </tr>
- </table>
- <mce:scripttype="text/javascript"><!--
- var htmlArray = [
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- 'html配置自定义面板内容编号姓名编号姓名编号姓名编号姓名编号姓名编号姓名编号姓名编号姓名编号姓名'
- ];
-
- var config = {
- title:'使用html配置自定义面板内容',//panel标题
- height:150,//panel高
- width:250,//panel宽
- frame:true,//渲染
- collapsible:true,//允许展开收缩
- autoScroll:true,//允许显示滚动条
- autoHeight:false,//使用固定高度
- //autoHeight:true, //自适应高度
- renderTo:'panel',//定位
- html:htmlArray.join(''),//panel中显示的自定义html代码
- bodyStyle:'background-color:#ffffff'//panel背景色
- }
-
- var panel = new Ext.Panel(config);
-
- <mce:scripttype="text/javascript"><!--
- /*
- 使用items配置在面板中添加组件
- */
-
- /*使用items配置添加单一组件实例*/
- Ext.onReady(function(){
- var config = {
- headler:true,//面板头部
- title:'日历',//面板标题
- frame:true,//渲染
- collapsible:true,//允许伸展收缩
- autoHeight:true,//允许自动高度
- width:189,//面板固宽度
- renderTo:'panel',//面板定位
- items:new Ext.DatePicker()//向面板中添加一日期组件
- }
-
- var panel = new Ext.Panel(config);
- });
-
- /*使用items配置添加多个组件实例*/
- Ext.onReady(function(){
- var config = {
- headler:true,
- title:'使用items配置添加多个组件',
- frame:true,
- height:200,
- width:250,
- renderTo:'panel',
- //设置所有面板的默认属性
- defaults:{
- bodyStyle:'background-color:#ffffff',//背景色
- height:80,//面板固定高度
- collapsible:true,//允许伸展收缩
- autoScroll:true//自动显示滚动条
- },
- //面板元素数组
- items:[
- //嵌套面板一
- new Ext.Panel({
- title:'嵌套面板一',
- contentEl:'localElement'//加载本地数据
- }),
- new Ext.Panel({
- title:'嵌套面板而',
- autoLoad:'page1.html'//加载远程页面(失败)
- })
- ]
- }
-
- var panel = new Ext.Panel(config);
- });
0 0
- ExtJS 常用组件属性 及使用方法(转发)
- ExtJS 常用组件属性 及使用方法
- ExtJS 常用组件属性 及使用方法
- Extjs表单组件及属性
- Extjs tree的相关组件及属性
- ExtJs Grid相关组件及属性
- Extjs tree的相关组件及属性
- Extjs tree的相关组件及属性
- Extjs tree的相关组件及属性
- Extjs combox 常用属性及问题
- Extjs combox 常用属性及问题
- EXTJS使用XType来定义组件及使用方法
- ExtJs的一些组件中常用的参数、属性整理
- extjs组件属性详解
- extjs-panel常用属性
- ExtJs常用控件属性
- ExtJs常用控件属性
- Informatica常用组件使用方法
- 解决 android 的R文件不能生成 R cannot be resolved to a variable
- Java架构师与程序开发者需求的工具
- 1019. 数字黑洞 (20)
- [Tue, 11 Aug 2015 ~ Mon, 17 Aug 2015] Deep Learning in arxiv
- Python 中的继承之Super用法
- ExtJS 常用组件属性 及使用方法
- SDUT 2413 哈希
- 语不惊人死不休(157)自由选择,自负后果
- 在AndroidMainfest中锁定屏幕方向
- HDU 1874 畅通工程续
- KVC基本使用
- linux ln 命令使用参数详解(ln -s 软链接)
- position与anchorPoint
- 常见排序算法(冒泡,选择,快速)的C语言实现【修正版】