Results 1 to 6 of 6

Thread: Dynamic form creation ( load data problem )

  1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    141

    Default Dynamic form creation ( load data problem )

    Here is my problem with dynamic form creation ...

    How do I know, when all fields i dynamically have been created and loaded their data (for example Comboboxes, fckeditors etc ... )..

    In my case I get formConfig with ajax request and build a form from that config. Since some of the fields have comboboxes, fckeditors etc. inside and I want those fields to be populated before I load the data into the form ( form.getForm().load(...) ). if comboboxes are not populated by the time I call load() method, forexample data shown in combo is a number instead of a selected combo Item ...

    Does anybody know how to solve this ?

    thanks

    Armando

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Posts
    141

    Default [SOLUTION] one way to do it

    how I solved this problem..

    I put config option in field config describing that this field must first be loaded before form data is loaded
    when field is dynamically created in my form, i count fields that must load its data. That's how I know how many fields will load it's data before I perfom form.getForm().load().
    Each field is added after load event to notify my form that it's data was loaded ...
    when all fields loaded their data form loads it's record.

    Might help someone

    bye

    Armando

  3. #3
    Sencha User
    Join Date
    Feb 2009
    Location
    New York
    Posts
    6

    Default Could you show an example?

    Your explanation is.. vague, I'm working on something like this, could you show some code to support this? It would be truly appreciated.

  4. #4
    Sencha Premium User couetbis's Avatar
    Join Date
    Jan 2008
    Location
    Nantes - France
    Posts
    108

    Default

    Hi,
    I up this post because i have the same problem and I would like to know what is this config option ! Have you got an example ?
    Thanks

  5. #5
    Sencha User
    Join Date
    Apr 2008
    Posts
    141

    Default

    damn.. this was last year ... And I cant remember what I did back then .. (since I was just playing around with the idea)

    will look into it tomorrow and give you the code (I think it's still somewhere !!!)

    KInd regards

    Armando

  6. #6
    Sencha User
    Join Date
    Apr 2008
    Posts
    141

    Default

    PHP Code:

    /**
     * BSP FORM BUILDER
     */

    function FCKeditor_OnComplete(editorInstance){

        
    Ext.getCmp(editorInstance.Name).isLoaded=true;
        var 
    formName    '';
        
    editorInstance.Events.AttachEvent('OnStatusChange', function(){
            var 
    editor     Ext.getCmp(editorInstance.Name);
            
    editor.setValue('');
            var 
    form     editorfindParentByType('form');
            
    form.notifyDone();
        })
        
    }


    var 
    BspFormManager    = function(){
    }

    BspFormManager.prototype.getForm    = function( formConfigcallerIdcallerControllercallerTypecallerWindowIdwindowedwindowId ){
        
        if(
    formConfig.record_id == undefined){
            
    formConfig.record_id '';
        }
        
        var 
    toolbar        = new Ext.Panel(
            {
                
    id        'toolbar-'+formConfig.id
                
    layout    'table',
                
    columns 1
            
    }
        );
        
        var 
    form        = new Ext.form.FormPanel(
            {
                
    id                formConfig.id,
                
    title            formConfig.title,
                
    loadUrl            '/admin_extjs/'+formConfig.controller+'/load_record/',
                
    removeUrl        '/admin_extjs/'+formConfig.controller+'/remove_record/',
                
    saveUrl            '/admin_extjs/'+formConfig.controller+'/save_record/',
                
    autoScroll        true,
                
    doneFields        0,
                
    collapsible        false,
                
    notifyFields    0,
                
    windowed        windowed,
                
    record_id        formConfig.record_id,    
                
    caller_id            callerId
                
    caller_controller    callerController,
                
    caller_type            callerType,
                
    caller_window_id    callerWindowId,
                
    windowed        windowed,
                
    window_id        windowId,
                
    tbar            toolbar,
                
    loadRecord        : function(recordId){
                    var 
    url    this.loadUrl;
                    
    this.getForm().load(
                        {
                            
    url            url+recordId
                            
    method        :'GET',
                            
    waitMsg        'Loading ...',
                            
    waitTitle    'Info',
                            
    success        : function(form,action){ 
                            },
                            
    // callback handler if submit has failed
                            
    failure        : function(form,action) {
                                
    Ext.MessageBox.alert('Error'action.result.data);
                            }
                        }
                    );
                },
                
    saveRecord        : function(){
                    var 
    url            this.saveUrl;
                    
    this.getForm().submit(
                        {
                            
    url            url
                            
    waitMsg        'Saving record ...',
                            
    waitTitle    'Info',
                            
    success        : function(form,action){
                                var 
    callerWindowId    this.caller_window_id;
                                var 
    caller             Ext.getCmp(this.caller_id);
                                if(
    caller != undefined && caller != null){
                                    if(
    this.record_id != null && this.record_id != undefined){
                                        
    caller.beforeRefresh(this.record_id);
                                    }
                                } else 
                                if((
    this.caller_controller != undefined) && (this.caller_controller != null) ) {
                                    var 
    action     '';
                                    var 
    what     '';
                                    if(
    this.callerType =='grid'){
                                        
    action     'load_grid/';
                                        
    what    this.caller_type;
                                    } else 
                                    if(
    this.callerType == 'form'){
                                        
    action     'load_form/';
                                        
    what    this.caller_type;
                                    }
                                    
                                    
    windowed    this.windowed;
                                    
    windowId    this.window_id;
                                    
                                    
    Ext.Ajax.request(
                                        {
                                            
    url    '/admin_extjs/'+this.caller_controller+'/'+action,
                                            
    success    : function(result,request){
                                                var 
    callerConfig    Ext.util.JSON.decode(result.responseText);
                                                
                                                var 
    drawConfig    = {
                                                    
    draw_action    what
                                                    
    config                callerConfig.data
                                                    
    caller_window_id    callerWindowId,
                                                    
    windowed    windowed,
                                                    
    window_id    windowId
                                                
    };
                                                
    bspLayoutManager.changedrawConfig );
                                            },
                                            
    failure    : function(result,request){
                                                var 
    message        Ext.util.JSON.decode(result.responseText);
                                                
    Ext.MessageBox.alert('Error'message.data);
                                            },
                                            
    scope    this
                                        
    }
                                    );
                                }
                                
                                if( 
    this.windowed ){
                                    var 
    window    this.findParentByType('window');
                                    
    window.hide();
                                    
    this.destroy();
                                }
                                
                            },                                
                            
    // callback handler if submit has failed
                            
    failure: function(form,action) {
                                
    Ext.MessageBox.alert('Error'action.result.data);
                            },
                            
    scopethis
                        
    }
                    );
                },
                
    removeRecord    : function(recordId){
                    var 
    url    this.removeUrl;
                    
    this.getForm().submit(
                        {
                            
    url            url
                            
    waitMsg        'Deleting record ...',
                            
    waitTitle    'Info',
                            
    success        : function(form,action){ 
                            },                                
                            
    // callback handler if submit has failed
                            
    failure: function(form,action) {
                                
    Ext.MessageBox.alert('Error'action.result.data);
                            }
                        }
                    );
                },
                
    resetForm        : function(){
                    
    this.getForm().reset();
                },
                
    beforeRefresh    : function(recordId){
                    
    this.notifyRefresh();
                },
                
    notifyRefresh    : function(){
                    
                },
                
    notifyDone        : function(){
                    
    this.doneFields++;
                    
    //console.log(this.notifyFields+':'+this.doneFields);
                    
    if(this.doneFields == this.notifyFields) {
                        if(
    this.record_id){
                            
    this.loadRecord(this.record_id);
                        }
                    }
                }
            }
        );
        
        for(var 
    0formConfig.fields.lengthi++){
            var 
    fieldConfig    formConfig.fields[i];
            
            if(
    fieldConfig.notify && (fieldConfig.notify == 1)){
                
    form.notifyFields++;
            }
            
            var 
    field         this.getField(form,fieldConfig);
            if(
    field != undefined)    form.add(field);
        }
        
        
        
        for(var 
    0formConfig.buttons.lengthi++){
            var 
    buttonConfig        formConfig.buttons[i];
            
            var 
    buttonHandler        = function(){};
            var 
    icon                '';
            
            
            if(
    buttonConfig.action == 'save' ){
                
    buttonHandler        this.saveButtonHandler;
                
    icon                '/img/admin/button_ok.png';
            } else 
            if(
    buttonConfig.action == 'remove' ){
                
    buttonHandler        this.removeButtonHandler;
                
    icon                '/img/admin/button_delete.png';
            } else
            if(
    buttonConfig.action == 'reset' ){
                
    buttonHandler        this.resetButtonHandler;
                
    icon                '/img/admin/button_reset.png';
            }
            
            
    toolbar.add(new Ext.Button(
                {
                    
    tooltip    buttonConfig.text
                    
    icon    icon,
                    
    cls        'x-btn-icon',
                    
    handler    buttonHandler,
                    
    scope    form
                
    }
            ));
        }
        
        
    form.doLayout();
        try {
            return 
    form;
        } finally {
            
    form    null;
        }
    }



    BspFormManager.prototype.getField    = function(form,fieldConfig){
        var 
    field     null;
        if(
    fieldConfig.type == 'textfield'){
            
    field    this.getTextField(form,fieldConfig);
        } else 
        if(
    fieldConfig.type == 'textarea'){
            
    field    this.getTextareaField(form,fieldConfig);
        } else 
        if(
    fieldConfig.type == 'fckeditor'){
            
    field    this.getFckEditorField(form,fieldConfig);
        } else 
        if(
    fieldConfig.type == 'hidden'){
            
    field    this.getHiddenField(form,fieldConfig);
        } else 
        if(
    fieldConfig.type == 'checkbox'){
            
    field    this.getCheckboxField(form,fieldConfig);
        } else
        if(
    fieldConfig.type == 'radio'){
            
    field    this.getRadioField(form,fieldConfig);
        } else
        if(
    fieldConfig.type == 'combo'){
            
    field    this.getComboField(form,fieldConfig);
        }  else 
        if(
    fieldConfig.type == 'datefield'){
            
    field    this.getDateField(form,fieldConfig);
        } else 
        if(
    fieldConfig.type == 'timefield'){
            
    field    this.getTimeField(form,fieldConfig);
        } 
        return 
    field;
    }    

    BspFormManager.prototype.getTextField    = function(form,fieldConfig){
        var 
    field     = new Ext.form.TextField(
            {
                
    id            form.id+'-'+fieldConfig.name,
                
    name        fieldConfig.name,
                
    fieldLabel    fieldConfig.label
            
    }
        );
        
        return 
    field;
    }

    BspFormManager.prototype.getTextareaField    = function(form,fieldConfig){
        var 
    field     = new Ext.form.TextArea(
            {
                
    id            form.id+'-'+fieldConfig.name,
                
    name        fieldConfig.name,
                
    fieldLabel    fieldConfig.label,
                
    width        fieldConfig.params.width,
                
    height        fieldConfig.params.height
            
    }
        );
        
        return 
    field;
    }


    BspFormManager.prototype.getHiddenField    = function(form,fieldConfig){
        var 
    field     = new Ext.form.Hidden(
            {
                
    id            form.id+'-'+fieldConfig.name,
                
    name        fieldConfig.name
            
    }
        );
        
        return 
    field;
    }

    BspFormManager.prototype.getCheckboxField    = function(form,fieldConfig){
        var 
    field     = new Ext.form.Checkbox(
            {
                
    id            form.id+'-'+fieldConfig.name,
                
    name        fieldConfig.name,
                
    fieldLabel    fieldConfig.label
            
    }
        );
        return 
    field;
    }

    BspFormManager.prototype.getRadioField    = function(form,fieldConfig){
        var 
    field     = new Ext.form.Radio(
            {
                
    id            form.id+'-'+fieldConfig.name,
                
    name        fieldConfig.name,
                
    fieldLabel    fieldConfig.label
            
    }
        );
        return 
    field;
    }


    BspFormManager.prototype.getComboField    = function(form,fieldConfig){
        
        var 
    comboFieldDataStore = new Ext.data.Store({
            
    id                    fieldConfig.name+'-store',
            
    proxy                : new Ext.data.HttpProxy({
                    
    url            '/admin_extjs/'+fieldConfig.params.controller+'/load_dropdown_records/',
                    
    method        'POST'
            
    }),
            
    autoLoad            true,
            
    baseParams            : {task"LISTING",node:null},         // this parameter asks for listing
            
    reader                : new Ext.data.JsonReader({           // we tell the datastore where to get his data from
                    
    root            'data',
                    
    totalProperty    'total',
                    
    id                'id'
                
    },
                [ 
                    {
    name'id'type'int'mapping'id'},
                    {
    name'name'type'string'mapping'name'}
                ]
            )
        });
        
    comboFieldDataStore.addListener(
            
    'load',
            function(
    storerecordsoptions){
                
    this.notifyDone();
            }, 
            
    form
        
    );
        
        var 
    field     = new Ext.form.BspComboBox({
            
    autoLoad        true,
            
    name            fieldConfig.name,
            
    hiddenName        fieldConfig.name,
            
    id                form.id+'-'+fieldConfig.name,
            
    fieldLabel        fieldConfig.label,
            
    valueField        'id'
            
    height            20,
            
    editable        false,
            
    store            comboFieldDataStore,
            
    displayField    'name',
            
    mode            'remote',
            
    msgTarget        'title',
            
    typeAhead        true,
            
    triggerAction    'all',
            
    listWidth        300,
            
    onTrigger2Click    : function(){
                var 
    controller        fieldConfig.params.controller;
                
    Ext.Ajax.request(
                    {
                        
    url    '/admin_extjs/'+controller+'/load_form/',
                        
    success    : function(result,request){
                            var 
    formData    Ext.util.JSON.decode(result.responseText);
                            
                            var 
    drawConfig    = {
                                
    draw_action            'form'
                                
    config                formData.data,
                                
    caller_id            this.id,
                                
    caller_controller    controller,
                                
    windowed            true
                                
    width                500
                                
    height                400
                            
    };
                            
                            
    bspLayoutManager.changedrawConfig );
                        },
                        
    failure    : function(result,request){
                            var 
    message        Ext.util.JSON.decode(result.responseText);
                            
    Ext.MessageBox.alert('Error'message.data);
                        },
                        
    scope    this
                    
    }
                );
                
                
    //bspLayoutManager.loadForm('form');
            
    },
            
    trigger2Class    '',
            
    emptyText        fieldConfig.params.text+'...',
            
    selectOnFocus    true,
            
    listeners        : {
                
    'select'    : function(combobox,record,index){
                    
                }    
            }, 
            
    beforeRefresh    : function(){
                
    this.notifyRefresh();
            },
            
    notifyRefresh    : function(){
                
    this.store.load();
            }
        })
        
        return 
    field;
    }
    BspFormManager.prototype.getDateField    = function(form,fieldConfig){
        var 
    field     = new Ext.form.DateField(
            {
                
    id            form.id+'-'+fieldConfig.name,
                
    name        fieldConfig.name,
                
    fieldLabel    fieldConfig.label,
                
    format        'd.m.Y',
                
    altFormat    'Y-m-d'
            
    }
        );
        
        return 
    field;
    }
    BspFormManager.prototype.getTimeField    = function(form,fieldConfig){
        var 
    field     = new Ext.form.TimeField(
            {
                
    id            form.id+'-'+fieldConfig.name,
                
    name        fieldConfig.name,
                
    fieldLabel    fieldConfig.label,
                
    format        'H:i'
                
    value        : new Date()
            }
        );
        
        return 
    field;
    }


    BspFormManager.prototype.getFckEditorField = function(formfieldConfig){
        var 
    field     = new Ext.form.TextArea(
            {
                
    hideLabel:true,
                
    name        fieldConfig.name,
                
    id            form.id+'-'+fieldConfig.name,
                
    height        fieldConfig.params.height,
                
    width        fieldConfig.params.width,
                
    toolbar        fieldConfig.params.toolbar,
                
    editorValue    '',
                
    isLoaded    false,
                
    listeners:{
                    
    render:function(cmp){
                        var 
    oFCKeditor                    = new FCKeditor(cmp.id);
                        
    oFCKeditor.BasePath                '/javascript/fck-2.5.1/';
                        
    oFCKeditor.ToolbarSet            cmp.toolbar;
                        
    oFCKeditor.Config['SkinPath']    = '/javascript/fck-2.5.1/editor/skins/office2003/';
                        
    oFCKeditor.Height                cmp.height;
                        
    oFCKeditor.Width                cmp.width;
                        
    oFCKeditor.ReplaceTextarea();
                        
    cmp.editor                        oFCKeditor;
                    }
                },
                
    setConfigParam    : function(paramName,paramValue){
                    var 
    oEditor                        FCKeditorAPI.GetInstance(this.id);
                    if(
    oEditor!=undefined) {
                        
    oEditor.Config[paramName]     = paramValue ;
                    } else {
                        
    alert('No editor defined ['+this.id+']')
                    }
                },
                
    setValue : function(value){
                    var 
    oEditor                        FCKeditorAPI.GetInstance(this.id);
                    if(
    oEditor!=undefined) {
                        
    oEditor.SetData(value);
                        
    Ext.form.TextArea.superclass.setValue.apply(this,[value]);
                    } else {
                        
    alert('No editor defined ['+this.id+']');
                    }
                }
            }
        );
        return 
    field;
    }

    BspFormManager.prototype.saveButtonHandler        = function(button,e){
        
    this.saveRecord();
    }

    BspFormManager.prototype.removeButtonHandler    = function(button,e){
        
    this.deleteRecord();
    }

    BspFormManager.prototype.resetButtonHandler        = function(button,e){
        
    this.getForm().reset();
    }


    /**
        End of BSP FORM BUILDER
     **/ 
    and the JSON string ...

    !!!! MIND THE NOTIFY values !!!

    Code:
    {"success":true,"data":{"id":null,"title":"Edit text","controller":"texts","width":800,"height":700,"params"
    :[],"buttons":[{"action":"save","text":" Save "},{"action":"remove","text":" Remove "},{"action":"reset"
    ,"text":" Reset "}],"fields":[{"name":"id","label":"id","type":"hidden","notify":0,"params":[]},{"name"
    :"parent_item_id","label":"parent_item_id","type":"hidden","notify":0,"params":[]},{"name":"link_item_id"
    ,"label":"link_item_id","type":"hidden","notify":0,"params":[]},{"name":"lang_id","label":"lang_id","type"
    :"hidden","notify":0,"params":[]},{"name":"title","label":"Title","type":"textfield","notify":0,"params"
    :[]},{"name":"subtitle","label":"subtitle","type":"hidden","notify":0,"params":[]},{"name":"lead","label"
    :"Lead","type":"fckeditor","notify":1,"params":{"width":"100%","height":100,"toolbar":"Basic"}},{"name"
    :"content_text","label":"Content","type":"fckeditor","notify":1,"params":{"width":"100%","height":300
    ,"toolbar":"Simple"}},{"name":"content_date","label":"Date","type":"datefield","notify":0,"params":[
    ]},{"name":"author","label":"Author","type":"textfield","notify":0,"params":[]},{"name":"is_published"
    ,"label":"Is published","type":"checkbox","notify":0,"params":[]},{"name":"content_time","label":"Time"
    ,"type":"timefield","notify":0,"params":[]}]}}
    notify values were because I firstly had to create and layout a form and AFTER that load data into created form

    Hope that helps

    kind regards

    Armando

Posting Permissions

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