ext layout 之 card布局使用示例

最新推荐文章于 2017-11-24 10:41:54 发布

刑天易云

最新推荐文章于 2017-11-24 10:41:54 发布

阅读量4.9k

点赞数

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

本文链接：https://blog.youkuaiyun.com/xingtianyiyun/article/details/7793283

版权

extjs 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个交互式安装向导的实现过程，包括窗口创建、面板控制器翻转逻辑以及布局管理。详细解释了如何使用Ext JS库创建可动画折叠的窗口，并通过翻转面板控制器实现导航逻辑。

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

/*创建window/

function openWin(){

      var win =new Ext.Window({
          animCollapse :true,
          width:320,
          height:280,
          animateTarget: 'chakan',
          constrainHeader:true,
          layout :'fit'

      });
      return win;

}

var win=openWin();

   /*翻转panel 控制器*/
                   var navHandler = function(direction){
                        // 这段程序可以包含控制导航步骤所需的业务逻辑。
                        // 在需要的时候它将调用setActiveItem方法，管理导航按钮的状态，
                        // 处理任何可能需要的逻辑分支，处理可能的操作，像退出或操作完成，等等。
                        // 在现实的实现中，一个完整的安装向导实现会非常复杂，它与复杂的需求有关。
                        // 可能需要要扩展CardLayout类。
                       var layout=card.getLayout();
                       var obj=this;
                       var bottoms=card.getBottomToolbar();
                       var p=card.layout.activeItem.id;
                       for(index=0; index<panel_ids.length;index++){
                           if(p==panel_ids[index]){
                               var n=index+direction;
                                layout.setActiveItem(n);
                                if(panel_ids[0]==panel_ids[n]){
                                   bottoms.items.items[0].setDisabled(true);
                                   bottoms.items.items[2].setDisabled(false);
                                }
                                if(panel_ids[0]!=panel_ids[n]&&panel_ids[panel_ids.length-1]!=panel_ids[n]){
                                   bottoms.items.items[0].setDisabled(false);
                                    bottoms.items.items[2].setDisabled(false);
                                }
                                if(panel_ids[panel_ids.length-1]==panel_ids[n]){
                                    bottoms.items.items[0].setDisabled(false);
                                    bottoms.items.items[2].setDisabled(true);
                                }
                                break;
                           }
                       }
                   };

/*创建panel*/
                    var panel_ids=['card-0','card-1','card-2'];
                   var card = new Ext.Panel({
                        title: 'Example Wizard',
                        layout:'card',
                        activeItem: 0, //确保在容器的配置项中设置了当前活动项！
                        bodyStyle: 'padding:15px',
                        defaults: {
                            // applied to each contained panel
                            border:false
                        },
                        // 只是一个例子，一个可能的导航方案，使用按钮
                        bbar: [
                            {
                                id: 'move-prev',
                                text: 'Back',
                                handler: navHandler.createDelegate(this,[-1]),
                                disabled: true
                            },
                            '->', //贪婪分隔符，这样按钮就被对齐到边界处
                            {
                                id: 'move-next',
                                text: 'Next',
                                handler: navHandler.createDelegate(this, [1])
                            }
                        ],
                        // the panels (or "cards") within the layout
                        items: [{
                            id: panel_ids[0],
                            html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
                        },{
                            id: panel_ids[1],
                            html: '<p>Step 2 of 3</p>'
                        },{
                            id: panel_ids[2],
                            html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
                        }]
                   });
                   win.add(card);
                   win.show();