Form Items Not showing on second time in button click.

[anglergobinath]

Form Items Not showing on second time in button click.

Hi to Everyone.

I am new to EXTJS ..here is my code. In that am showing the modal popup window in button click events.On first time all the items are showing well. then i close the window then click the second time some of the items are not showing in the modalpop up window.please help.

This is my code:

var FP_AddDirectory = new Ext.form.Panel({
    // xtype: 'form',
    region: 'center',
    width: 600,
    height: 365,
    frame: true,
    bodyStyle: 'padding:35px;',
    border: '0',
    //   title: '',
    defaults: { width: '90%' },
    labelAlign: 'center',


    fieldDefaults: {
        msgTarget: 'side',
        labelWidth: 140
    },
    defaultType: 'textfield',


    items: [
                             {
                                 xtype: 'checkboxfield',
                                 id: 'chkboxImportEnabled',
                                 width: 350,
                                 fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">Enabled</span></b>',
                                 labelWidth: 140,
                                 checked: true
                             },
                        {
                            xtype: 'combobox',
                            id: 'ImportDirectory',
                            width: 350,
                            fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">Import Directory</span></b>',
                            labelWidth: 140,
                            store: 'FolderStore'
                        },
                        {
                            xtype: 'combobox',
                            id: 'ImportListDefintion',
                            width: 350,
                            fieldLabel: ' <b><span style=" text-align:center ! important; color:#336699 !important; ">List Definition</span></b>',
                            labelWidth: 140,
                            store: 'FolderStore'
                        },
                        {
                            xtype: 'checkboxgroup',
                            id: 'chkgrpImportSchedule',
                            width: 500,
                            fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">Schedule</span></b>',
                            labelWidth: 140,
                            items: [
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkMon',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Mon</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkTue',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Tue</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkWed',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Wed</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkThu',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Thu</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkFri',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Fri</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkSat',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Sat</span>',
                                    boxLabelAlign: 'before'
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkSun',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Sun</span>',
                                    boxLabelAlign: 'before'
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            height: 50,
                            id: 'ScheduleSingRepeatFieldSet',
                            padding: '0 0 0 120',
                            style: 'border-width:0px;\nborder-color:transparent;\nbackground:#dfe9f6;',
                            width: 450,
                            layout: {
                                type: 'column'
                            },
                            items: [
                                {
                                    xtype: 'fieldset',
                                    border: 0,
                                    height: 62,
                                    style: 'border-width:0px;\nborder-color:transparent;\nbackground:#dfe9f6;',
                                    id: 'PnlSingleRepeat',
                                    width: 130,
                                    items: [
                                        {
                                            xtype: 'radiogroup',
                                            border: 0,
                                            height: 59,
                                            id: 'rbtGrpSingleRepeat',
                                            width: 130,
                                            hideLabel: true,
                                            columns: 1,
                                            vertical: true,
                                            items: [
                                                {
                                                    xtype: 'radiofield',
                                                    height: 22,
                                                    id: 'rbtSingleImportSchedule',
                                                    padding: '0 0 0 25',
                                                    name: 'rbtSchedule',
                                                    fieldLabel: 'Label',
                                                    hideLabel: true,
                                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Single Import at</span>'
                                                },
                                                {
                                                    xtype: 'radiofield',
                                                    id: 'rbtRepeatImportSchedule',
                                                    padding: '0 0 0 25',
                                                    name: 'rbtSchedule',
                                                    fieldLabel: 'Label',
                                                    hideLabel: true,
                                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Repeat every</span>'
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    xtype: 'fieldset',
                                    border: 0,
                                    height: 62,
                                    id: 'pnlValueforSchedule',
                                    style: 'border-width:0px;\nborder-color:transparent;\nbackground-color:#dfe9f6;',
                                    width: 160,
                                    bodyBorder: false,
                                    items: [
                                        {
                                            xtype: 'combobox',
                                            id: 'CmboboxTimeSingleImportSchedule',
                                            padding: '0 0 0 10',
                                            width: 140,
                                            fieldLabel: 'Label',
                                            hideLabel: true,
                                            labelWidth: 0
                                        },
                                        {
                                            xtype: 'fieldset',
                                            border: 0,
                                            height: 35,
                                            id: 'valueforRepeatSchedule',
                                            style: 'border-width:0px;\nborder-color:transparent;\nbackground-color:#dfe9f6;',
                                            width: 100,
                                            layout: {
                                                type: 'column'
                                            },
                                            items: [
                                                {
                                                    xtype: 'textfield',
                                                    id: 'txtTimeRepeatImportSchedule',
                                                    width: 30,
                                                    fieldLabel: 'Label',
                                                    hideLabel: true,
                                                    maxLength: 2,
                                                    size: 2
                                                },
                                                {
                                                    xtype: 'label',
                                                    html: '<span style=" text-align:center ! important; color:#336699 !important; ">mins</span>',
                                                    padding: '3 0 0 10'
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            border: 0,
                            height: 26,
                            id: 'ScheduleFromToFieldSet',
                            style: 'border-width:0px;\nborder-color:transparent;',
                            width: 500,
                            layout: {
                                type: 'column'
                            },
                            items: [
                                {
                                    xtype: 'label',
                                    html: '<span style=" text-align:center ! important; color:#336699 !important; ">From</span>',
                                    padding: '3 0 0 140'
                                },
                                {
                                    xtype: 'combobox',
                                    id: 'CmboboxTimeRepeatImportScheduleFrom',
                                    padding: '0 0 0 5',
                                    width: 140,
                                    fieldLabel: 'From',
                                    hideLabel: true,
                                    labelWidth: 30
                                },
                                {
                                    xtype: 'label',
                                    html: '<span style=" text-align:center ! important; color:#336699 !important; ">To</span>',
                                    padding: '3 0 0 10'
                                },
                                {
                                    xtype: 'combobox',
                                    id: 'CmboboxTimeRepeatImportScheduleTo',
                                    padding: '0 0 0 5',
                                    width: 140,
                                    fieldLabel: 'Label',
                                    hideLabel: true
                                }
                            ]
                        },
                        {
                            xtype: 'textfield',
                            id: 'txtImportScheduleListName',
                            width: 350,
                            fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">List Name</span></b>',
                            labelWidth: 140
                        },
                        {
                            xtype: 'radiogroup',
                            padding: '0 0 0 145',
                            width: 400,
                            hideLabel: true,
                            labelWidth: 140,
                            allowBlank: false,
                            vertical: false,
                            items: [
                                {
                                    xtype: 'radiofield',
                                    id: 'rbtListNameNew',
                                    name: 'rbt',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Create new List</span>',
                                    checked: false
                                },
                                {
                                    xtype: 'radiofield',
                                    id: 'rbtListNameExist',
                                    name: 'rbt',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Append to Existing</span>'
                                }
                            ]
                        }
    ],


    buttonAlign: 'right',
    width: 590,
    buttons: [{
        text: '<b><span style=" color:#336699 !important; ">Save</span></b>',
        icon: 'Images/Save.png',
        iconAlign: 'left',
        handler: function(btn, eventObj) {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                waitMsg: 'Uploading...',


                form.submit({
                    url: 'http://angler129/ImportExportTool/ScriptPage/ScriptPageProxy.aspx/AddDirectory',
                    failure: function() {


                        Ext.Msg.show(
                        {
                            title: 'Error',
                            msg: '500 Internal Server Error..!',
                            buttons: Ext.Msg.OK,
                            icon: Ext.MessageBox.ERROR,
                            animateTarget: btnImportAdd,
                            width: 275
                        }
                        );
                    },
                    success: function(fp, response, o) {


                        // Read JSON
                        var respon = response.response.responseText;
                        if (respon == "{'success':'true'}") {


                            var win = Ext.WindowManager.getActive();
                            if (win) {
                                win.close();
                            }
                            Ext.Msg.show(
                        {
                            title: '<b><span style=" color:#336699 !important; ">ATTENTION</span></b>',
                            msg: form.getValues().Name + ' Folder has created successfully..!',
                            buttons: Ext.Msg.OK,
                            icon: Ext.MessageBox.INFO,
                            animateTarget: btnImportAdd,
                            width: 325
                        }
                        );
                            form.reset();


                        }
                        else if (respon == "{'success':'false'}") {


                            Ext.Msg.show(
                    {
                        title: '<b><span style=" color:#336699 !important; ">ATTENTION</span></b>',
                        msg: 'Directory Name ' + form.getValues().Name + ' has already exists.\n It must be a unique \n Please enter a new name.!',
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.WARNING,
                        animateTarget: btnImportAdd,
                        width: 325
                    }
                    );
                            form.reset();
                        }
                    }
                });


            }
        }


    }, {
        text: '<b><span style=" color:#336699 !important; ">Cancel</span></b>',
        icon: 'Images/Cancel.png',
        iconAlign: 'left',
        handler: function(btn, eventObj) {
            // btn.findParentByType('form').getForm().reset();
            var win = Ext.WindowManager.getActive();
            if (win) {
                win.close();
            }


        }
}]
    });






    var modalwindow = new Ext.window.Window({
        title: 'ADD SCHEDULED IMPORT',
        closable: true,
        resizable: false,


        modal: true,
        closeAction: 'hide',
        animateTarget: btnImportAdd,
        width: 600,
        height: 400,
        // layout: 'border',
        bodyStyle: 'border:0',
        items: [
{
    region: 'center',
    xtype: 'form',
    items: [FP_AddDirectory]
}]
    });
    modalwindow.show();

[sword-it]

Hi!

Check the below sample:-

Ext.define('myForm',{
    extend:'Ext.form.Panel',
    xtype: 'myForm',
    items:[{
        xtype:"textfield",
        width:200
    }]
});


Ext.define('myWindow',{
   extend:'Ext.window.Window',
   title:'Window',
   height:200,
   width:200,
   items:[{xtype: 'myForm'}]
});


Ext.create('Ext.Button',{
  text:'show',
  handler:function(){
     var myWin= new myWindow;
     myWin.show();
  }
});

[anglergobinath]

Hi Sword ,

Still the Items are not showing in the button click on second Time . I dont know What I did the mistake in sencha Architech ? Please reffer the below screen shot..


Thanks a lot.

1.GIF2.GIF?

[anglergobinath]

Dear Sword,

Please help me..am struggle for this modal popup for last 2 days. Thanks for your kind support.

[anglergobinath]

Dear Sword..

Please help me for this....

[sword-it]

Hi anglergobinath,
Try the code give below:

I did some changes in your provided code for layout of items:

var FP_AddDirectory = new Ext.form.Panel({
        width: 600,
        height: 365,
        frame: true,
        bodyStyle: 'padding:35px;',
        border: '0',
        //defaults: { width: '90%' },
        labelAlign: 'center',
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 140
        },
        defaultType: 'textfield',




        items: [
                        {
                            xtype: 'checkboxfield',
                            id: 'chkboxImportEnabled',
                            width: 350,
                            fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">Enabled</span></b>',
                            labelWidth: 140,
                            checked: true
                        },
                        {
                            xtype: 'combobox',
                            id: 'ImportDirectory',
                            width: 350,
                            fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">Import Directory</span></b>',
                            labelWidth: 140
                            //store: 'FolderStore'
                        },
                        {
                            xtype: 'combobox',
                            id: 'ImportListDefintion',
                            width: 350,
                            fieldLabel: ' <b><span style=" text-align:center ! important; color:#336699 !important; ">List Definition</span></b>',
                            labelWidth: 140
                            //store: 'FolderStore'
                        },
                        {
                            xtype: 'checkboxgroup',
                            id: 'chkgrpImportSchedule',
                            width: 500,
                            fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">Schedule</span></b>',
                            labelWidth: 140,
                            items: [
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkMon',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Mon</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkTue',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Tue</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkWed',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Wed</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkThu',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Thu</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkFri',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Fri</span>',
                                    boxLabelAlign: 'before',
                                    checked: true
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkSat',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Sat</span>',
                                    boxLabelAlign: 'before'
                                },
                                {
                                    xtype: 'checkboxfield',
                                    id: 'chkSun',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Sun</span>',
                                    boxLabelAlign: 'before'
                                }
                            ]
                        },
                        {
                            xtype: 'fieldset',
                            id: 'ScheduleSingRepeatFieldSet',
                            padding: '0 0 0 120',
                            width: 580,
                            border: false,
                            height: 60,
                            layout: 'column',
                            items: [
                                {
                                    xtype: 'container'
                                    , layout: 'form'
                                    , border: false
                                    , width: 150
                                    , items: [
                                        {
                                            xtype: 'radiogroup',
                                            id: 'rbtGrpSingleRepeat',
                                            padding: '0 0 0 25',
                                            hideLabel: true,
                                            columns: 1,
                                            vertical: true,
                                            items: [
                                                {
                                                    xtype: 'radiofield',
                                                    height: 22,
                                                    id: 'rbtSingleImportSchedule',
                                                    padding: '0 0 0 25',
                                                    name: 'rbtSchedule',
                                                    fieldLabel: 'Label',
                                                    hideLabel: true,
                                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Single Import at</span>'
                                                },
                                                {
                                                    xtype: 'radiofield',
                                                    id: 'rbtRepeatImportSchedule',
                                                    padding: '0 0 0 25',
                                                    name: 'rbtSchedule',
                                                    fieldLabel: 'Label',
                                                    hideLabel: true,
                                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Repeat every</span>'
                                                }
                                            ]
                                        }
                                    ]
                                }, 
                                {
                                xtype: 'container'
                                    , border: false
                                    , layout: 'form'
                                    , width: 200
                                    , items: [
                                        {
                                            xtype: 'combobox',
                                            id: 'CmboboxTimeSingleImportSchedule',
                                            padding: '0 0 0 10',
                                            width: 75,
                                            hideLabel: true,
                                            labelWidth: 0
                                        },
                                        {
                                            xtype: 'fieldset',
                                            border: 0,
                                            //height: 35,
                                            id: 'valueforRepeatSchedule',
                                            style: 'padding-left:0px;padding-top: 3px;border-width:0px;\nborder-color:transparent;\nbackground-color:#dfe9f6;',
                                            //width: 100,
                                            layout: 'column',
                                            items: [
                                                {
                                                    xtype: 'textfield',
                                                    id: 'txtTimeRepeatImportSchedule',
                                                    width: 30,
                                                    style: 'padding:3px 0px 0px 0px;',
                                                    hideLabel: true,
                                                    maxLength: 2,
                                                    size: 2
                                                },
                                                {
                                                    xtype: 'label',
                                                    html: '<span style=" text-align:center ! important; color:#336699 !important; ">mins</span>',
                                                    padding: '3 0 0 10'
                                                }
                                            ]
                                        }
                                    ]
                            }
                            ]
                        },
                        {
                            xtype: 'container'
                            , layout: 'column'
                            , padding: '0 0 0 150'
                            , width: 580
                            , height: 30
                            , items: [
                                {
                                    xtype: 'label',
                                    html: '<span style=" text-align:center ! important; color:#336699 !important; ">From</span>'
                                    //padding: '3 0 0 140'
                                },
                                {
                                    xtype: 'combobox',
                                    id: 'CmboboxTimeRepeatImportScheduleFrom',
                                    padding: '0 0 0 5',
                                    width: 140,
                                    fieldLabel: 'From',
                                    hideLabel: true,
                                    labelWidth: 30
                                },
                                {
                                    xtype: 'label',
                                    html: '<span style=" text-align:center ! important; color:#336699 !important; ">To</span>',
                                    padding: '3 0 0 10'
                                },
                                {
                                    xtype: 'combobox',
                                    id: 'CmboboxTimeRepeatImportScheduleTo',
                                    padding: '0 0 0 5',
                                    width: 140,
                                    fieldLabel: 'Label',
                                    hideLabel: true
                                }
                            ]
                        },
                        {
                            xtype: 'textfield',
                            id: 'txtImportScheduleListName',
                            width: 350,
                            fieldLabel: '<b><span style=" text-align:center ! important; color:#336699 !important; ">List Name</span></b>',
                            labelWidth: 140
                        },
                        {
                            xtype: 'radiogroup',
                            padding: '0 0 0 145',
                            width: 400,
                            hideLabel: true,
                            labelWidth: 140,
                            allowBlank: false,
                            vertical: false,
                            items: [
                                {
                                    xtype: 'radiofield',
                                    id: 'rbtListNameNew',
                                    name: 'rbt',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Create new List</span>',
                                    checked: false
                                },
                                {
                                    xtype: 'radiofield',
                                    id: 'rbtListNameExist',
                                    name: 'rbt',
                                    boxLabel: '<span style=" text-align:center ! important; color:#336699 !important; ">Append to Existing</span>'
                                }
                            ]
                        }
    ],
        buttonAlign: 'right',
        width: 590,
        buttons: [{
            text: '<b><span style=" color:#336699 !important; ">Save</span></b>',
            icon: 'Images/Save.png',
            iconAlign: 'left',
            handler: function (btn, eventObj) {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    waitMsg: 'Uploading...',

                form.submit({
                    url: 'http://angler129/ImportExportTool/ScriptPage/ScriptPageProxy.aspx/AddDirectory',
                    failure: function () {
                        Ext.Msg.show(
                        {
                            title: 'Error',
                            msg: '500 Internal Server Error..!',
                            buttons: Ext.Msg.OK,
                            icon: Ext.MessageBox.ERROR,
                            animateTarget: btnImportAdd,
                            width: 275
                        }
                        );
                    },
                    success: function (fp, response, o) {




                        // Read JSON
                        var respon = response.response.responseText;
                        if (respon == "{'success':'true'}") {




                            var win = Ext.WindowManager.getActive();
                            if (win) {
                                win.close();
                            }
                            Ext.Msg.show(
                        {
                            title: '<b><span style=" color:#336699 !important; ">ATTENTION</span></b>',
                            msg: form.getValues().Name + ' Folder has created successfully..!',
                            buttons: Ext.Msg.OK,
                            icon: Ext.MessageBox.INFO,
                            animateTarget: btnImportAdd,
                            width: 325
                        }
                        );
                            form.reset();




                        }
                        else if (respon == "{'success':'false'}") {




                            Ext.Msg.show(
                    {
                        title: '<b><span style=" color:#336699 !important; ">ATTENTION</span></b>',
                        msg: 'Directory Name ' + form.getValues().Name + ' has already exists.\n It must be a unique \n Please enter a new name.!',
                        buttons: Ext.Msg.OK,
                        icon: Ext.MessageBox.WARNING,
                        animateTarget: btnImportAdd,
                        width: 325
                    }
                    );
                            form.reset();
                        }
                    }
                });




                }
            }




        }, {
            text: '<b><span style=" color:#336699 !important; ">Cancel</span></b>',
            icon: 'Images/Cancel.png',
            iconAlign: 'left',
            handler: function (btn, eventObj) {
                // btn.findParentByType('form').getForm().reset();
                var win = Ext.WindowManager.getActive();
                if (win) {
                    win.close();
                }
            }
        }]
    });












    var modalwindow = new Ext.window.Window({
        title: 'ADD SCHEDULED IMPORT',
        closable: true,
        resizable: false,
        // modal: true,
        closeAction: 'hide',
        animateTarget: 'btnImportAdd',
        width: 600,
        height: 400,
        bodyStyle: 'border:0',
        items: [
            {
                region: 'center',
                xtype: 'form',
                items: [FP_AddDirectory]
            }
        ]
    });

[anglergobinath]

Hi sword..

Thanks for your reply.

The modified code shows the error. " TypeError Nampespace is undefined "..Am still struggling in this part.

[anglergobinath]

Hi Sword..

I fixed the issue .

Solution : In Modal Window I coded Like that " closeAction: 'hide' " Now I changed to like that
closeAction: 'destroy' now its working fine.

Thanks for your great support.