现在的位置: 首页 > 综合 > 正文

ExtJS 之panel tabpanel 和window 的简单使用

2013年01月05日 ⁄ 综合 ⁄ 共 3262字 ⁄ 字号 评论关闭

          var panel = new Ext.Panel(
                {

                     id:id值//通过id可以找到这个组件,建议一般加上这个id值
                    title:
"标题",//如果标题为空  标题栏就不会显示
                    width:
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',
             width:
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,
             width:
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 标签 的对象”

抱歉!评论已关闭.