EXTjs 伸缩菜单布局accordion 和向导布局cardlayout

最新推荐文章于 2020-05-15 08:12:02 发布

wangchuanbaodhcc

最新推荐文章于 2020-05-15 08:12:02 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs 文章标签： extjs wizard html layout border function

本文链接：https://blog.youkuaiyun.com/wangchuanbaodhcc/article/details/6676439

ExtJs 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了EXTjs中两种重要的布局方式：伸缩菜单布局（accordion）和向导布局（cardlayout）。通过示例和图片展示，解释了这两种布局在页面构建中的应用和实现细节，帮助读者理解如何在EXTjs项目中有效地利用它们来创建功能丰富的HTML界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function(){
	
	 var navhandler=function(direction){
	 var wizard=Ext.getCmp('wizard').layout;
	 var pre=Ext.getCmp('move_prev');
	 var next=Ext.getCmp('move_next');
	 var activeId=wizard.activeItem.id;
	 if(activeId=='card-0'){
	     if(direction==1){
	       wizard.setActiveItem(1);
	       pre.setDisabled(false);
	     }
	 }else if(activeId=='card-1'){
	     if(direction==-1){
	         wizard.setActiveItem(0);
	         pre.setDisabled(true);
	      }else{
	          wizard.setActiveItem(2);
	          next.setDisabled(true);
	                }
	 }else if(activeId=='card-2'){
	     if(direction==-1){
	        wizard.setActiveItem(1);
	        next.setDisabled(false);
	        }
	     }
	      
	      }
   new Ext.Viewport({
     layout:'border',
      items:[
      {region:'north',title:'north',html:'north',height:50,collapsible:true},
      {region:'south',title:'south',html:'south',height:50,collapsible:true},
      {region:'west',title:'west',width:200,collapsible:true,
        layout:'accordion', //accordion布局模式
        layoutConfig:{
           animate:true
          //titleCollapse:true,
          //activeOnTop:false
                     },
          items:[{
          title:'第一栏',
          html:'第一栏'
          },{
          title:'第二栏',
          html:'第二栏'
          },{
          title:'第三栏',
          html:'第三栏'
          }
                ]},
      {
        region:'east',id:"wizard",title:'向导',activeItem:0,width:200,collapsible:true,
        layout:'card',//card布局模式
        bodyStyle:'padding:15px',
        defaults:{
        border:false
                 },
        bbar:[{
             id:'move_prev',
             text:'上一步',
             handler: navhandler.createDelegate(this,[-1]),
             disabled:true
             },
              '->',// 表示会占据所有空白的区域
             {
             id:'move_next',
             text:'下一步',
             handler:navhandler.createDelegate(this,[1])
             }],
         items:[{
             id:'card-0',
             html:'<h1>hehe</h1><p>第一步</p>'
             },{
             id:'card-1',
             html:'<h1>hehe</h1><p>第二步</p>'
             },{
             id:'card-2',
             html:'<h1>hehe</h1><p>第三步</p>'
              }]
       },
      {region:'center',title:'center',html:'center'}
           ]
                    });
});

图片显示：