zoukankan      html  css  js  c++  java
  • Ext面板

    <HTML> 
    <HEAD> 
    <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 
                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主要配置项目表表

    配置项

    参数类型

    说明

     

    animCollapse

    Boolean

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

     

    applyTo

    Mixed

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

     
     

    autoDestroy

    Boolean

    设置是否自动销毁从容器中移除的组件,默认为true,否则要手工销毁

     

    autoHeight

    Boolean

    是否使用自动高度,true则使用自动高度,false则使用固定高度,默认为false

     

    autoLoad

    Object/String/ 
    Function

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

     

    autoScroll

    Boolean

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

     

    autoShow

    Boolean

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

     

    autoWidth

    Boolean

    是否使用自动宽度,true为自动宽度,false为固定宽度,默认为false

     

    baseCls

    String

    应用于面板元素的基本样式类,默认为'x-panel'

     

    bbar

    Object/Array

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

     

    bodyBorder

    Boolean

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

     

    bodyStyle

    String/Object/ 
    Function

    应用于面板体(body)的自定义样式。默认为null

     

    border

    Boolean

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

     

    buttonAlign

    String

    设置面板底部(footer)中按钮的对齐方式,有效值包括:'right', 'left' 和'center',默认为'right' 

     

    buttons

    Array

    加入到面板底部(footer)中按钮配置对象的数组

     

    collapseFirst

    Boolean

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

     

    collapsed

    Boolean

    设置面板在第一次渲染时是否处于收缩状态,true则收缩,false则展开,默认为false

     

    collapsible

    Boolean

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

     

    contentEl

    String

    设置面板的内容元素,可以是页面元素的id或已存在的HTML节点

     

    defaultType

    String

    面板中元素的默认类型,默认为'panel'

     

    defaults

    Object

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

     

    floating

    Boolean

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

     

    footer

    Boolean

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

     

    frame

    Boolean

    设置是否渲染面板,true则渲染面板为自定义的圆角边框,false则渲染为1px的直角边框

     

    header

    Boolean

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

     

    headerAsText

    Boolean

    设置是否在面板的header中显示title,true则显示,默认为true

     

    height

    Number

    面板高度,默认为auto

     

    hideBorders

    Boolean

    true则隐藏面板容器中所有组件的边框,false则根据组件的具体配置进行显示

     

    hideCollapseTool

    Boolean

    设置当collapsible为true时,是否显示展开或收缩按钮

     

    html

    String/Object

    设置面板(body)元素的内容为HTML片段或DomHelper生成的内容。

     

    items

    Mixed

    单独一个子组件或子组件的数组

     

    layout

    String

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

     

    layoutConfig

    Object

    这个配置对象包含被选布局的配置项,针对每种布局的配置项需要查看相应的布局类说明

     

    maskDisabled

    Boolean

    设置当面板不能使用时是否遮罩面板,true则遮罩,默认为true

     

    shadow

    Boolean/String

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

     

    shadowOffset

    Number

    设置面板阴影的偏移量,以像素为单位,默认为4。该项只在floating 为true时生效

     

    tbar

    Object/Array

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

     

    title

    String

    显示在面板头部的标题信息'

     

    titleCollapse

    Boolean

    设置是否允许通过点击面板头部进行展开和收缩操作,true则允许,默认为false

     

    tools

    Array

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

     

    width

    Number

    面板宽度,默认为auto

     
             

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

    tools配置项明细表

    配置项

    参数类型

    说明

    id

    String

    必选项,可能值及效果见表5.3

    handler

    Function

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

    scope

    Object

    处理函数的执行范围

    qtip

    String/Object

    为按钮指定提示信息,可以是字符串或配置对象

    hidden

    Boolean

    设置初次渲染时,是否隐藏

    on

    Object

    为按钮配置事件监听器。

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

     

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

    new Ext.dd.DDProxy('basic');//加上这一句就可以随意拖动
  • 相关阅读:
    [再寄小读者之数学篇](2014-06-19 满足三个积分等式的函数)
    [再寄小读者之数学篇](2014-06-19 微分等式的结论)
    我的一些武功
    TEX学习笔记
    我的一些诗词
    我的课程与学生
    [再寄小读者之数学篇](2014-06-19 三维插值公式)
    [再寄小读者之数学篇](2014-06-19 旋度公式)
    JAVA小项目实例源码—学习娱乐小助手
    可拖拽的3D盒子
  • 原文地址:https://www.cnblogs.com/mingforyou/p/3272795.html
Copyright © 2011-2022 走看看