Monday, 25 May 2015

How to create new pop window in Extjs and open via controller.

Create a pop up Window view in Extjs:
Ext.define("yourappanme.view.inventory.ProductCategoryAdd",{
    extend: 'Ext.window.Window',
    controller: 'inventory-productcategory',
    id: 'ProductCategoryWindow',
    width: 350,
    bodyPadding: 10,
    layout: {
        type: 'vbox',
        align: 'stretch'    },
    title : 'New Product Category',
    constrain: true,
    closable: true,
    scope: this,
    items: [{
        xtype: 'form',
        id: 'NewProductCategoryForm',
        defaultType: 'textfield',
        width: 350,
        bodyPadding: 10,
        items:[{
            name: 'category_name',
            inputType: 'text',
            fieldLabel: 'Category Name'        }]

    }],

    buttons: [{
        text: 'Add',
        inputType: 'submit',
        handler: 'onClickSubmitCategoryButton'    },{
        text: 'Close',
        listeners: {
            click: 'closeView'        }
    }]
});

Be sure your view files is loaded successfully. Please add this file to root.js, if you following the Extjs sample application.


Create a open pop up Window via Controller in Extjs:
Any Controller file, in which we want to open this view:
/**this function is used to open a pop window and**/onClickAddCategoryButton: function(btn){
    var win = new esales.view.inventory.ProductCategoryAdd({
        animateTarget: btn.id    });
    win.show();
},

No comments:

Post a Comment