Question

我在Extjs中创建了3个面板，2个按钮（上一个，下一个）并添加到视口中。一次只能看到一个面板（默认情况下是第一个面板）。点击下一个按钮，它应该显示下一个面板，然后如果我点击“上一个”按钮，它应该显示上一个面板。

现在我已经编写了一个面板代码及其工作方式，面板不能正确导航到左右。

这是我的代码：

Ext.application({
name: 'HelloExt',
requires: [
'Ext.util.Point' 

 ],
launch: function() {

 var button =Ext.create('Ext.Button', {
    text: 'Toggle Containers',
    handler: function () {      

    if (this.clickCount==1) {            
        containerPanel1.getEl().scrollRight; 
        containerPanel2.getEl().slideIn('t', 'toggle');
        this.clickCount=2;

    } else {

        this.clickCount = 1;            
        containerPanel1.getEl().slideIn('t', 'toggle');
        containerPanel2.getEl().scrollLeft;

        }

    }, 
    renderTo: Ext.getBody()
}); 


var containerPanel1 = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
draggable: {
      insertProxy: false,

      startDrag: function(e) {
        var el = Ext.get(this.getEl());
        el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');
        this.x = el.getLeft(true);
        this.y = el.getTop(true);           
      },          

      afterDrag: function(e) {
          this.x = el.getLeft(true);
          this.y = el.getTop(true);
          this.fireEvent('itemdrag', this);

      }
    },
width:400,
height:550,    
layout: 'column',
bodyStyle:{'background-color':'blue'},
margin:'30 0 0 20', 
suspendLayout: true ,   
defaults :{
xtype: 'panel',
margin:'30 0 0 0',
height: 450,
columnWidth: 0.2
},

 items: [
    {
        html: 'Child Panel 1',            
    },
    {           
        html: 'Child Panel 2',          
    },
    {          
        html: 'Child Panel 3',          
    },
    {            
        html: 'Child Panel 4',          
    },
    {           
        html: 'Child Panel 5',          
    }
]
      });

containerPanel1.draggable;

var containerPanel2 = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
draggable: {
      insertProxy: false,

      startDrag: function(e) {
        var el = Ext.get(this.getEl());
        el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');
        this.x = el.getLeft(true);
        this.y = el.getTop(true);           
      },          
          afterDrag: function(e) {
          this.x = el.getLeft(true);
          this.y = el.getTop(true);
          this.fireEvent('itemdrag', this);

      }
    },
width:400,
height:550,  
layout: 'column',
bodyStyle:{'background-color':'green'},
margin:'30 0 0 20', 
suspendLayout: true ,   
defaults :{
xtype: 'panel',
margin:'30 0 0 0',
height: 300,
columnWidth: 0.2
},  
 items: [           
    {      
        html: 'Child Panel 1',            
    },
    {            
        html: 'Child Panel 2',          
    },
    {           
        html: 'Child Panel 3',          
    },
    {            
        html: 'Child Panel 4',          
    },
    {           
        html: 'Child Panel 5',

    }
]
   });
     containerPanel2.draggable;
    containerPanel2.getEl().hide();

       Ext.create('Ext.container.Viewport', {
   layout: 'column',
    items: [containerPanel1,containerPanel2,button]

    }); 


    }
     });

请帮帮我..谢谢

Answer 1

我刚刚建立了一个类似的项目，所以这里有一个你可以使用的示例代码段。请注意，您可以更改面板的数量和顺序，代码仍然有效。点击处理程序首先查找可见面板，然后根据方向尝试前进或后退。

Ext.define('MyApp.view.MyViewport1', {
    extend: 'Ext.container.Viewport',

    id: 'switchPanels',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    height: 100,
                    html: 'this is panel 1',
                    title: 'My Panel A'
                },
                {
                    xtype: 'panel',
                    height: 100,
                    hidden: true,
                    html: 'this is panel 2',
                    title: 'My Panel B'
                },
                {
                    xtype: 'panel',
                    height: 100,
                    hidden: true,
                    html: 'this is panel 3',
                    title: 'My Panel C'
                },
                {
                    xtype: 'container',
                    switchPanel: function(forward) {
                        var p = Ext.ComponentQuery.query('panel(true){isVisible()}')[0]; // visible panel
                        var n = forward ? p.nextSibling('panel(true)') : p.previousSibling('panel(true)'); // closest sibling
                        if (n) { // don't let go past the last one
                            p.hide();
                            n.show();
                        }
                        else {
                            console.log("can't go past the " + (forward ? 'end' : 'beginning'));
                        }
                    },
                    id: 'buttons',
                    items: [
                        {
                            xtype: 'button',
                            handler: function(button, event) {
                                button.up().switchPanel(false);
                            },
                            text: 'Prev'
                        },
                        {
                            xtype: 'button',
                            handler: function(button, event) {
                                button.up().switchPanel(true);
                            },
                            text: 'Next'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

Answer 2

您需要使用卡（向导）布局。请参阅下面的simple sample example。

我相信这可以帮助您解决问题。

var active = 0;
var main = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 200,
    height: 200,
    layout: 'card',
    tbar: [{
        text: 'Next',
        handler: function(){
            var layout = main.getLayout();
            ++active;
            layout.setActiveItem(active);
            active = main.items.indexOf(layout.getActiveItem());
        }
    }],
    items: [{
        title: 'P1'
    }, {
        title: 'P2'
    }, {
        title: 'P3',
        listeners: {
            beforeactivate: function(){
                return false;
            }
        }
    }]
});

请参阅以下链接中的卡片（向导）布局。

http://docs.sencha.com/extjs/4.2.0/#!/example/layout-browser/layout-browser.html

由于

如何通过单击Sencha ExtJs中的按钮使面板左右导航

2 个答案: