Как заставить панели перемещаться влево и вправо по нажатию кнопки в Sencha ExtJs

Я создал 3 панели, 2 кнопки (предыдущая, следующая) в Extjs и добавил их в окно просмотра. Одновременно должна быть видна только одна панель (по умолчанию первая панель). При нажатии следующей кнопки должна отображаться следующая панель, затем, если я нажимаю кнопку «Предыдущая», должна отображаться предыдущая панель.

Теперь я написал код для панелей, и он работает, поскольку панели не перемещаются влево и вправо должным образом.

Вот мой код:

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]

    }); 


    }
     });

Пожалуйста, помогите мне .. Спасибо


panel extjs
person user1943750    schedule 05.06.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я просто создавал аналогичный проект, поэтому вот пример фрагмента, который вы могли бы использовать. Обратите внимание, что вы можете изменить количество и порядок панелей, и код все равно будет работать. Обработчик кликов просто сначала ищет видимую панель, а затем, в зависимости от направления, пытается двигаться вперед или назад.

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);
    }

});
person Geo    schedule 05.06.2013

arrow_upward
0
arrow_downward

Для этого вам нужно использовать макет карты (волшебник). см. 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

Спасибо

person Hariharan    schedule 06.06.2013