Results 1 to 5 of 5

Thread: Problem with creating dynamic form

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    9

    Default Problem with creating dynamic form

    I want to create a dynamic form where the items config is supplied by a PHP script.

    I have created a simple script as shown below. The problem is it only shows an empty form.
    Code:
    function onReady() {
    
    var basicForm = 
    {
        id: 'IDform'
        ,xtype:'form'
        ,labelWidth:60
        ,frame:true
    //    ,items: [ {fieldLabel: 'aaa', name: 'bbb', xtype: 'textfield' } ]
    };
    
    var win = new Ext.Window({
        title:'My Form'
        ,renderTo:Ext.getBody()
        ,width:420
        ,height:240
        ,border:false
        ,layout:'fit'
        ,items: basicForm,
    });
    
    Ext.Ajax.request({
        url : 'formconfig.php' , 
        method: 'GET',
        success: function (response) { 
            var AJAXform = Ext.JSON.decode(response.responseText);
            Ext.apply(basicForm, AJAXform);
            win.show();
        },
        failure: function (response) { 
            console.log('AJAX failed');
        } 
    });
    
    
    }
    And here is the formconfig.PHP script:
    Code:
    <?php
    $fields = array(
        array(
            "fieldLabel"=>"aaa"
            ,"name"=>"bbb"
            ,"xtype"=>"textfield"
        )
    );
    
    
    $config = array(
         "success"=>true
         "items"=>$fields
    );
    echo json_encode($config);
    ?>

    Any help will be appreciated. Many thanks!

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    Think about the order. The window is being constructed and loaded before you even fire off the Ajax request.

    Would suggest you look at examples/component-loader in the SDK download.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    9

    Default

    Thanks for the quick response!

    Pardon about that silly mistake. By moving win declaration right before win.show(), the problem is solved.

    However, what if I want to stay with my original script? I just need to re-render the component before win.show().
    I've been searching and reading the forum but haven't got the concept about how to re-render. Which component should be re-rendered? The window or the form?
    I've tried the following statements and didn't work:
    Code:
    Ext.getCmp('IDwindow').render();
    win.render();
    win.show();
    Again, pardon for another stupid question ... thanks!

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    You never re-render components, once a component is rendered, that's it.

    To change the contents of a container, you use the add/insert & remove methods.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    9

    Default

    It's very clear to me now. Because the component can't be re-rendered, so I must revise my UI design.

    Many thanks evant!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •