zoukankan      html  css  js  c++  java
  • ExtJS 之panel tabpanel 和window 的简单使用

              var panel = new Ext.Panel(
                    {

                         id:id值//通过id可以找到这个组件,建议一般加上这个id值
                        title:
    "标题",//如果标题为空  标题栏就不会显示
                        
    300,
                        height:
    200,
                        html:'
    <h1>hello,world!>',
                        collapsible:
    true,

                       region : 'west',//布局方式   注意如果是border 布局  region     一定要有控件显示于center
                       split  : true,

                     titleCollapse:true,//标题处任何处点击都会展开
                     collapsible : true,
                     margins     : '3 0 3 3',
                     cmargins    : '3 3 3 3',
                     renderTo:
    "divDisplay"//要渲染的HTML标签id

                     resizable:false,(是否可以改变大小,默认可以)

                    applyTo:(id)呈现在哪个html元素里面
                    contentEl:(id)呈现在哪个html元素里面,把el内的内容呈现
                    renderTo:(id)呈现在哪个html元素里面

                    draggable:true则可拖动,但需要你提供操作过程,默认为false

                    //frame:true,//圆角 
                    plain:true,//方角 默认
                    });    

    tabpanel

                var tabs = new Ext.TabPanel({
                 renderTo: 'hello',
                
    450,
                
    height:200,
                 activeTab: 0,
                 frame:
    true,
                
                 defaults:{autoHeight:
    true},
                 items:[
                     {contentEl:'script', title: '子面板1'},
                     {contentEl:'markup', title: '子面板2'}
                 ]
                
                 });

                var tabs2 = new Ext.TabPanel({
                 renderTo: document.body,
                 activeTab:
    0,
                
    600,
                 height:
    250,
                 plain:
    true,
                 defaults:{autoScroll:
    true},
                 items:[{
                         title: 'Normal Tab',
                         html:
    "My content was added during construction."
                     },{
                         title: 'Ajax Tab
    1',
                         autoLoad:'ajax1.htm'
                     },{
                         title: 'Ajax Tab
    2',
                         autoLoad: {url: 'ajax2.htm', params: 'foo
    =bar&wtf=1'}
                     },{
                         title: 'Event Tab',
                         listeners: {activate: handleActivate},
                         html:
    "I am tab 4's content. I also have an event listener attached."
                     },{
                         title: 'Disabled Tab',
                         disabled:
    true,
                         html:
    "Can't see me cause I'm disabled"
                     }
                 ]
                 });

    对用HTML

       <body style="padding:10px;">
            
    <div id="hello">
                
            
    </div>
            
    <div id="script" class="x-hide-display">
                
    <p>dddddddd<br/><br/> cccccccc</p>
            
    </div>
            
    <div id="markup" class="x-hide-display">
                
    <p>aaaaaaaaaa<br/><br/>bbbbbb<p>
            
    </div>
            
    <br>
        
    </body>

    window

             var win
            if(!win)
           {
             win = new Ext.Window({
                title    : '信息显示',
                closable : true,
                width    : 720,
                height   : 350,
                //border : false,
                plain    : true,
                layout   : 'border',//布局方式  其他还有column,from,table,fit 等等
                items    : [tabs,nav ],//里面所包含的组件
                 maximizable:true,//是否显示最大化按钮
                 modal:true,//是否是模式窗口

                 closeAction:'hide',//关闭时的动作 hide或close

                maximizable:true,//(是否增加最大化,默认没有)
                 draggable:false,//(是否可以拖动,默认可以)
                 minimizable:true,//(是否增加最小化,默认无)
                  closable:false//(是否显示关闭,默认有关闭)
            });
           }
           
       win.show(button);//“button点击 触发此window的html 标签 的对象”


  • 相关阅读:
    excel中如何筛选出同一列有重复的数据
    JTextFile换行
    DOM事件对象用法
    js事件监听
    webstorm 破解方法
    vux使用
    vue动态添加当前事件下的class
    subline3 如何设置es6高亮
    vueJS+ES6开发移动端APP实战项目笔记
    css命名规范和书写规范
  • 原文地址:https://www.cnblogs.com/zhangqifeng/p/1457157.html
Copyright © 2011-2022 走看看