JSON data can't load into a EditorGrid inside FormPanel

by rose on January 5th, 2009 |

  • Hi all,

    Is it possible to lay a EditorGrid inside a FormPanel? Cos' I have problems with loading JSON data into the EditorGrid inside FormPanel, yet the EditorGrid & FormPanel layouts drew successfully.

    Here's my code:


    var Route = Ext.data.Record.create([
    {name: 'portName', mapping: 'port.name'},
    {name: 'portCode', mapping: 'port.portCode'},
    {name: 'etdDate'},
    {name: 'cyDate'},
    {name: 'cyTime'},
    {name: 'etaDate'},
    {name: 'uid'}
    ]);
    var store = new Ext.data.Store({
    // create reader that reads the records
    reader: new Ext.data.JsonReader({
    root: 'routeList',
    id: 'uid'
    }, Route)
    });
    // form
    var simple = new Ext.FormPanel({
    labelAlign: 'top',
    width: 600,
    items: [{
    layout:'column',
    border:false,
    items:[{
    columnWidth:.5,
    border:false,
    layout: 'form',
    items: [{
    xtype:'textfield',
    fieldLabel: 'Vessel',
    name: 'vessel',
    maxLength: 30,
    anchor:'95%'
    }, {
    xtype:'textfield',
    fieldLabel: 'Carrier',
    name: 'carrier.id',
    anchor:'95%'
    }]
    },{
    columnWidth:.5,
    border:false,
    layout: 'form',
    items: [{
    xtype:'textfield',
    fieldLabel: 'Voyage',
    name: 'voyage',
    maxLength: 30,
    anchor:'95%'
    },{
    xtype:'textfield',
    fieldLabel: 'Remark',
    name: 'remark',
    anchor:'95%'
    }]
    }]
    }, {
    xtype: 'editorgrid',
    store: store, /* how to load data from FORM JSON data below?? */
    columns: [
    {header: "Port", dataIndex: 'portName', sortable: false, width:120, editor: new Ext.form.ComboBox({store: dsPort, displayField:'name', typeAhead: true, selectOnFocus:true, loadingText: 'Searching...', queryParam:'name', emptyText:'Search port...', triggerAction:'all'})},
    {header: "Code", dataIndex: 'portCode', sortable: false},
    {header: "ETA", dataIndex: 'etaDate', renderer: Ext.util.Format.dateRenderer('d/M/y'), editor: new Ext.form.DateField()},
    {header: "CY Date", dataIndex: 'cyDate', renderer: Ext.util.Format.dateRenderer('d/M/y'), editor: new Ext.form.DateField()},
    {header: "CY Time", dataIndex: 'cyTime', editor: new Ext.form.TimeField()},
    {header: "ETD", dataIndex: 'etdDate', renderer: Ext.util.Format.dateRenderer('d/M/y'), editor: new Ext.form.DateField()}
    ],
    height: 150,
    width: 700,
    enableColumnHide : false,
    enableColumnMove : false,
    enableColumnResize : false,
    enableHdMenu : false,
    clicksToEdit:1,

    tbar: ['Routing - '
    ,{
    text: 'Add port',
    handler : function(){
    var line = new Route({
    portCode: '',
    portName: '',
    etaDate: '',
    cyDate: '',
    cyTime: '',
    etdDate: '',
    uid: 0
    });
    store.insert(0, line);
    },
    scope: this
    }
    ,'->'
    ,{
    text: 'Refresh',
    handler: function(){store.load();},
    scope: this
    }]
    }]
    });


    the form load script:

    this.getForm().load({url: this.url+'?uid='+d.uid, method: 'post', scripts: true});


    JSON Data from server:

    {
    success: true,
    data:
    {'voyage': '101R', 'user': {'userId': 1,'uid': 0,'recordDate': 'Thu, 3 Jan 2008 14:41:42 +0800 (CST)'
    ,'title': ''},'routeList': [{'flag': 0,'uid': 1,'etaDate': 'Thu, 3
    Jan 2008 00:00:00 +0800 (CST)','cyDate': 'Tue, 8 Jan 2008 00:00:00 +0800 (CST)','cfsDate': 'Mon, 7 Jan
    2008 00:00:00 +0800 (CST)', 'port': {'uid': 0,'portCode': 'HKG','name': '','title': 'HKG'},'etdDate'
    : 'Thu, 10 Jan 2008 00:00:00 +0800 (CST)','title': 'HKG'},{'flag': 0,'uid': 2,'etaDate': 'Thu, 17 Jan
    2008 00:00:00 +0800 (CST)', 'port': {'uid': 0,'portCode': 'SIN','name': '','title': 'SIN'},'etdDate'
    : 'Fri, 18 Jan 2008 00:00:00 +0800 (CST)','title': 'SIN'},{'flag': 0,'uid': 5,'etaDate': 'Tue, 12 Feb
    2008 00:00:00 +0800 (CST)', 'port': {'uid': 0,'portCode': 'FLX','name': '','title': 'FLX'},'title':
    'FLX'}],'uid': 1, 'carrier': {'uid': 1},'remark': '123444555666','vessel': 'ABC VESSEL','title': 'ABC VESSEL.101R'}
    }


    The form data can be filled except the gird. What I want is load the 'routeList' data into the grid. But it's not working. if the above JSON data couldn't be loaded into the grid as I wish, pls advise the better method. I've been struggling with this issue for few weeks.

    Any help is appreciated.


  • Another problem is that if I place a EditorGrid inside a FormPanel, will the EditorGrid data post to the server too when I do the submit action of the FormPanel?

    Once again, great tks


  • Hi again,
    I've tried to debug but still have no clue.

    Is it ok the grid store doesn't have the 'url' property as below?

    this.store = new Ext.data.Store({
    // create reader that reads the records
    reader: new Ext.data.JsonReader({
    root: 'data.routeList',
    id: 'uid'
    }, Route)
    });


    Do I have to use isFormField:true for the grid?? But actually I've tried it but still not success.

    {
    xtype: 'grid',
    isFormField:true
    }


    Or, could any one give me example "how to load data into GridPanel within FormPanel in one single JSON call by form.load(url)"
    Any help is really really appreciated!!!


  • What debugging technique have you used?


  • I use firefox/firebug, but there's no error at all. Pls see attached for your ref.
    The form values are loaded, but the grid is empty. :(


  • Tks!! ...but it's still not working after I changed the root to "data.routeList"???


  • Well, you're going to have to debug it.


  • "use"? SO you actually use it to step through code line by line, examining what is happening in your code and in the functions that it calls?


  • choykawairicky,

    Did you find your answer? I had a similar issue - the JSON data looked fine, and the editor grid even displayed the correct number of rows for the data, but all the rows were empty.

    There were no errors in Firebug & no errors with loading the store.

    But then I noticed that I was inconsistent with cases - I would call the column "Phase" in one place, and "PHASE" in another.

    Just something to double-check! It's a frustrating one to debug.

    Best wishes,
    Cat


  • If I read your JSON right, your root is "data.routeList"







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about JSON data can't load into a EditorGrid inside FormPanel , Please add it free.

    editTags: xn--4cr.com