CODEWITHSUNDEEP
extjs
Sandy.Arv
Sandy.Arv

Reputation: 605

Display Panel on button click

I have created two panels. I want panel2 to be displayed below Panel1 on click of a button. What kind of listeners do i need to add in the button to make this happen? The example code is as follows

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

here i want the html 'world' to be displayed after the button click. is there a way to do it?

Upvotes: 0

Views: 3028

Answers (1)

pagep
pagep

Reputation: 3629

Sure, what you are looking for is the button config handler which handles the click of the button. You could also use event click or tap on the button (depends if you are in Classic or Modern framework). Than in this function you get the FormPanel in which the button is (get parent) and you can add any new item.

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

});

Here is working example: https://fiddle.sencha.com/#view/editor&fiddle/1sqr

Reading trough your question again it seems that you are asking about the forms bellow itself, in that case you would need container or something to put both forms into.

You can set this container its id and than just instead of calling button.getParent() you would call var cnt = Ext.ComponentQuery.query('#myId') which will return you array of object so you would do cnt[0].add(panel2); or you could use Ext.first('#myId').add(panel2)

Also don't forget that there is many ways how to achieve this in the ExtJS framework and this is just one of them.

Upvotes: 3

Related Questions