ext.panel 详解（ext.panel详解）.docVIP

ext.panel 详解（ext.panel详解） / /的HTML代码 “容器” / / JS代码 var p =新ext.panel（{ 标题：“我的面板，/ /标题 折叠：真的，/右上角上的那个收缩按钮，设为假则不显示 render：“容器”，//这个面板显示在HTML中ID为集装箱的层中 宽度：400， 身高：200， HTML：“BR我是内容，我包含的HTML可以被执行！/P ”/ /面板主体中的内容，可以执行HTML代码 }）； 因为面板组件的子类组件包括表示标签面板，到，formpanel，组件treepanel，所以非常有必要介绍面板组件的配置参数和相关的属性、方法。 / /配置参数（只列举部分常用参数） 1。加载：有效的URL字符串，把那个URL中的体中的数据加载显示，但是可能没有样式和JS控制，只是HTML数据 2。滚动：设为真则内容溢出的时候产生滚动条，默认为假 3。车展：设为真显示设为”x-hidden”的元素，很有必要，默认为假 4。带间俄歇复合：底部条，显示在主体内，/ /代码：带间俄歇复合：[ {文本：“底部工具栏bottomtoolbar”} ]， 5。对象：顶部条，显示在主体内，/ /代码：对象：【{文本：“顶部工具栏toptoolbar”} ]， 6。按钮：按钮集合，中自动添加到页脚（页脚参数，显示在主体外）/代码：按钮：【{文本：“按钮位于页脚”} ] 7。buttonalign：页脚中按钮的位置，枚举值为：“左”、“右”、“中心”，默认为权 8。湿陷性：设为真实，显示右上角的收缩按钮，默认为假 9。拖动：真正的则可拖动，但需要你提供操作过程，默认为假 10。HTML：主体的内容 11。身份证号：身份值，通过ID可以找到这个组件，建议一般加上这个ID值 12，宽度：宽度 13。高度：高度 13。标题：标题 14。titlecollapse：设为真实，则点击标题栏的任何地方都能收缩，默认为假。 15。适用于：（ID）呈现在哪个HTML元素里面 16。contentel：（ID）呈现哪个HTML元素里面，把EL内的内容呈现 17。render：（ID）呈现在哪个HTML元素里面 / /关于这三个参数的区别（个人认为：EL，适用于和render强调到到HTML元素中，contentel则是HTML元素到Ext组件中去） / /下面创建一个允许拖动的面板，但是拖动的结果不能保存 var p =新ext.panel（{ 标题：“拖我”， X：100， y：100， render：外部getbody()，/ / x，y，render：外部getbody()初始化面板的位置 浮动：正确，/ /真实 框架：真的，/圆角边框 宽度：400， 身高：200， 拖动：真 }）。show()；/ /在这里也可以不show() 但是还不能拖到其他的地方，我们需要改写拖动： 拖动：{ insertproxy：虚假，/ /拖动时不虚线显示原始位置 阻力：功能（e）{ VaR像素=这getel()。代理； 这个X =像素。getLeft（真的）； 这个y =像素。公司（true）；//获取拖动时面板的坐标 }， enddrag：功能（e）{ 这个面板位置（X，Y，这。）； / / move to the final position } } When dragging, the shadow is still in its original position, and we add code to the onDrag event in draggable: Var s = this.panel.getEl ().Shadow; If (s) { S.realign (this.x, this.y, pel.getWidth (), pel.getHeight ()); } The four parameter of the realign method of //shadow changes the location, size, and attribute of the shadow Finally, the code for this drag panel is: Var p=new Ext.Panel ({) Title:Drag me, X: 100, Y: 100, RenderTo:, Ext.getBody (), Floating: true, Frame: true, Width: 400, Height: 200, Draggable: { InsertProxy: false, OnDrag: function (E) { Var pel = this.proxy.getEl (); This