Ext面板详解编程语言

TITLE 面板 /TITLE link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" / script type="text/javascript" src="Ext/ext-base.js" /script script type="text/javascript" src="Ext/ext-all.js" /script script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8" /script /HEAD script type="text/javascript" function PannelBasic(){ var btn = new Ext.Button({text:"按钮1"}); var p = new Ext.Panel({ title: 面板标题, collapsible:true,//是否允许收缩 renderTo: basic,//指定渲染对象的ID width:400, // html: b 内容 /b br Hello 曼迪!, //html中的内容会显示在panel里面 //autoload:"news.html",//panel加载url items:[btn,{xtype:"button",text:"按钮2"},{title:"面板3",height:50,border:false}], // 按照布局方位，按钮在面板中出现的地方有这么几种： // bbar：显示在底部的工具栏 // buttons：显示在底部的按钮集合,如要改变其对齐方式用buttonAlign // tbar：顶部工具栏 // bbar：底部工具栏 // tools：头部工具栏 // 如果要显示一个Ext的按钮，可以使用下面代码实现： // new Ext.Button({ text: 新增 })//表示新建一个按钮对象 // - 是按钮之间的分隔线 // 由于Ext提供的按钮类型比较丰富，按钮还可以简单的描述为“{ text: 取消}” tbar: [new Ext.Button({ text: 新增 }),-, new Ext.Button({ text: 保存 }), new Ext.Button({ text: 修改 }) ] , bbar: [{text: 添加内容,handler:function(){ p.add({title:"添加面板"}); var p2 = p.getComponent(2); alert(p2.title); p.remove(p2); p.doLayout();//重新布局，否则不会显示添加的面板 //p.load("news.html"); p.body.update(" h1 新的内容 /h1 "+new Date()); }},{text: 上一页},{text: 下一页}], tools: [{id:save},{id:help},{id:close},{id:print,handler:function(){window.print();}}], buttonAlign:"center", buttons: [{ text: 保存, handler: worning }, { text: 取消}] }); function worning() { Ext.MessageBox.alert(提示,你点击了保存按钮！); Ext.onReady(PannelBasic);//开始执行 /script BODY !--面板作为一个很基础的容器控件，使用方式比较特殊，需要指定一个被渲染对象，一般是用一个div实现，意思是需要在页面预先定义好一个div，然后在Ext中用id找到这个div并把相应的效果渲染在里面-- div id="basic" /div /BODY /HTML

 

当然除了常用的这几个属性外，还有一大堆属性，这里以表格的形式列举出来，供大家查阅：

Ext.Panel主要配置项目表表

设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认
为true，否则为fasle。

 

一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。

 

设置面板自动加载的url地址。如果不为null则面板会尝试加载该url
并立刻在面板中进行渲染。这个连接将变成面板的body元素，所以可以根据需要在任何时候刷新面板内容

 

设置是否自动显示滚动条，true则设置面板的body元素样式为overflow: auto ，内容溢出时会自动显示滚动条，false则不显示滚动条对溢出的内容进行截断。默认为false

 

设置是否移除组件的隐藏样式（例如 x-hidden or x-hide-display ），如果为true则在渲染时移除它们，默认为false

 

设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。

 

设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效

 

这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px

 

设置面板底部（footer）中按钮的对齐方式，有效值包括： right , left 和 center ，默认为 right  

 

设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。

 

设置是否允许面板进行展开和收缩，true则允许进行展开和收缩，并在面板头部显示伸缩按钮。默认为false

 

应用到面板容器中所有元素的配置对象， 例如： defaults: {bodyStyle: padding:15px }

 

设置面板是否可以浮动，true则允许，默认为false。注意，设置floating为true会导致面板显示在负偏移的位置，从而面板不可见，因为浮动状态下面板是采用绝对定位的，位置必须在渲染之后进行明确的设置（例如myPanel.setPosition(100,100);）.，浮动面板也需要有固定的宽度

 

设置是否创建面板底部（footer）元素，true则创建，false则跳过footer元素的创建，如果一个或多个按钮被加入到footer中，则footer的设置会被忽略，而直接创建footer元素

 

设置是否创建面板头部（header）元素，true则创建，false则跳过header元素的创建，如果提供了title但没有设置header则header会被自动创建。如果提供了title但明确设置header为false则header不会被创建

 

面板的布局类型，默认Ext.layout.ContainerLayout布局，被选布局的配置项通过layoutConfig进行设置

 

设置是否在面板后面显示阴影，true则显示，或通过字符串指定阴影的显示模式，有效值包括：sides、frame、drop，默认为 sides 。该项只在floating 为 true时生效

 

设置面板的顶端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。注意，面板渲染后只能通过getTopToolbar方法访问该工具栏

 

工具按钮配置对象的数组，这些按钮会被添加到面板头部功能区，在表5-2中会有详细的说明

 

Tools 配置项主要用来设置面板头部功能区所要显示的各类按钮，每个按钮的配置对象可能包含的配置项在表5-2中说明，tools配置项id与按钮图标对应关系如表5-3所示。

tools配置项明细表

点击按钮后触发的处理函数，参数包括： event : Ext.EventObject、toolEl : Ext.Element、Panel : Ext.Panel

表5-3  tools配置项id与按钮图标对应关系表

 

当然，Ext还有一个最显著的特点就是可拖拽，那么实现一个控件可拖拽到底难不难？只需要配置draggable:true即可，大家可以试下。不过我相信20秒过后一大堆转头就飞过来了，原因是，拖是可以拖了，但是，鼠标一松，就又回到原地了，只需要在主函数体中加上一句：