Results 1 to 5 of 5

Thread: Problem with creating dynamic form

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    9
    Vote Rating
    0
      0  

    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,155
    Answers
    744
    Vote Rating
    986
      0  

    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
    Vote Rating
    0
      0  

    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,155
    Answers
    744
    Vote Rating
    986
      0  

    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
    Vote Rating
    0
      0  

    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
  •