按钮上的显示面板点击

我创建了两个面板。点击一个按钮后，我希望panel2显示在Panel1下面。我需要在按钮中添加什么类型的听众才能实现此目的？示例代码如下按钮上的显示面板点击

var panel1 = Ext.create('Ext.form. Panel', { 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     html: 'hello' 
    }, 
    { 
     xtype: 'button', 
     text: 'click me' 
    }] 
}); 

var panel2 = Ext.create('Ext.form. Panel', { 

    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     html: 'world'}] 
});

这里我想要html按钮点击后显示“世界”。有没有办法做到这一点？

来源

2017-03-27 Sandy.Arv

当然，你要找的是按钮config handler，它处理按钮的点击。您也可以使用按钮上的事件click或tap（取决于您是在经典还是现代框架中）。在这个函数中，你会得到FormPanel的按钮（get parent），你可以添加任何新的项目。

Ext.define('MyApp.view.MyFormPanel', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.myformpanel', 

    requires: [ 
     'Ext.Button' 
    ], 

    layout: 'vbox', 
    title: 'My Form', 

    items: [{ 
     xtype: 'button', 
     handler: function (button, e) { 
      var panel2 = Ext.create('Ext.form.Panel', { 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       items: [{ 
        html: 'world' 
       }] 
      }) 

      button.getParent().add(panel2); 
     }, 
     text: 'MyButton' 
    }, { 
     html: 'something' 
    }] 

}); 


Ext.application({ 
    views: [ 
     'MyFormPanel' 
    ], 
    name: 'MyApp', 

    launch: function() { 
     Ext.create('MyApp.view.MyFormPanel', { 
      fullscreen: true 
     }); 
    } 

});

这里是工作示例：https://fiddle.sencha.com/#view/editor&fiddle/1sqr

通读你的问题再一次似乎是你问的形式波纹管本身，在这种情况下，你需要的容器或东西把两种形式进入。

您可以设置此容器的id比的只是，而不是调用button.getParent()你会打电话var cnt = Ext.ComponentQuery.query('#myId')这将返回对象的数组，所以你会做cnt[0].add(panel2);或者你可以使用Ext.first('#myId').add(panel2)

另外不要忘了，有如何在ExtJS框架中实现这一点有很多方法，这只是其中之一。

来源

2017-03-27 10:41:35 pagep

按钮上的显示面板点击

回答

相关问题