ext layout 之 card佈局使用示例

原創

2020-02-22 14:24

/*創建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();