0

Extjs で 3 つのパネル、2 つのボタン (前、次) を作成し、ビューポートに追加しました。一度に表示できるパネルは 1 つだけです (デフォルトでは最初のパネル)。次のボタンをクリックすると次のパネルが表示され、「前へ」ボタンをクリックすると前のパネルが表示されます。

今、私はパネルのコードを書きましたが、パネルが左右に適切に移動していないため、その機能は機能しています。

これが私のコードです:

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]

    }); 


    }
     });

私を助けてください..ありがとう

4

2 に答える 2

0

私はちょうど同様のプロジェクトを構築していたので、使用できるスニペットの例を次に示します。パネルの数と順序を変更しても、コードは引き続き機能することに注意してください。クリック ハンドラーは、最初に表示されているパネルを探し、次に方向に応じて前方または後方に移動しようとします。

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

});
于 2013-06-05T17:01:50.983 に答える