1. #1
    Sencha User Arikon's Avatar
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    Arikon is on a distinguished road

      0  

    Default How to fill form in Dialog with values from JSON?

    How to fill form in Dialog with values from JSON?


    I have Ext.grid.Grid component, which get a list of users from JSON script.
    When i dblclick on row with user user edit BasicDialog is opened.
    That is working right.

    Now I want to fill form fields of that BasicDialog with data, which I want to recieve from another JSON script.
    How can I do it? I'm using Ext-1.0-alpha2.
    Documentation doesn't contain any info about Ext.data.Store, Ext.data.DataReader, Ext.data.JsonReader and so on.

  2. #2
    Sencha User Arikon's Avatar
    Join Date
    Mar 2007
    Posts
    76
    Vote Rating
    0
    Arikon is on a distinguished road

      0  

    Default


    Or simply please me give link to existing example. If so exists.

  3. #3
    Ext User reang's Avatar
    Join Date
    Mar 2007
    Location
    Indonesia
    Posts
    60
    Vote Rating
    0
    reang is on a distinguished road

      0  

    Default Filling Form Data from Grid

    Filling Form Data from Grid


    Hi Arikon,

    I just studying from "Loading/Saving a Dynamic Form using XML" on EXTJS 1.0 example, was i modified the code, i found code like this...

    Code:
    //craete Form for Dialog
    frmDLg = new Ext.form.Form({
    	labelWidth: 100,
    	reader : new Ext.data.JsonReader({
    		root: 'myFriends', totalProperty: 'totalCount'
    	}, [
    		{name: 'YoureNameField1', mapping: 'YoureNameField1', type: 'string'},
    		{name: 'YoureNameField1', mapping: 'YoureNameField1', type: 'string'},
    		{name: 'YoureNameField1', mapping: 'YoureNameField1', type: 'int'}
    	]),
    	labelAlign: 'right',
    	buttonPosition:'left'
    });
    
    frmDLg.add(
    	new Ext.form.TextField({
    		fieldLabel: 'Filed 1',
    		name: 'YoureNameField1',
    		width:350
    	}),
    	new Ext.form.TextField({
    		fieldLabel: 'Filed 2',
    		name: 'YoureNameField2',
    		width:350
    	}),
    	new Ext.form.TextField({
    		fieldLabel: 'Filed 3',
    		name: 'YoureNameField3',
    		width:30
    	})	
    );
    
    // on event rowdblclick of grid
    XGrid.on('rowdblclick',function(){
    	if (!dlgForm){
    		dlgForm = new Ext.LayoutDialog("dlgfrm", { 
    			autoCreate: true,
    			width:500,
    			height:300,
    			shadow:true,
    			resizable:false,
    			collapsible:false,
    			modal:true,
    			center: {
    				autoScroll:true,
    				tabPosition: 'top',
    				closeOnTab: true,
    				alwaysShowTabs: true
    			}
    		});
    		dlgForm.addKeyListener(27, dlgForm.hide, dlgForm);
    		dlgForm.addButton('Save', fnSave, this);
    		dlgForm.addButton('Cancel', dlgForm.hide, dlgForm);
    		
    		layoutDlg = dlgForm.getLayout();
    		layoutDlg.beginUpdate();
    		layoutDlg.add('center', new Ext.ContentPanel('tab1', {autoCreate:true, title: 'Tab 1', background:true}));
    		layoutDlg.endUpdate();
    	}
    	
    	layoutDlg.showPanel('tab1');
    	dlgForm.setTitle('Dialog Title');
    	dlgForm.show();
    	
    	//render and load form data
    	frmDLg.render('tab1');
    	var id = EdGrid.getSelectionModel().getSelected().data['fieldID'];//set params	
    	frmDLg.load({url: 'res/jgrid.php', params:'ID='+id+''}); //JSON file
    
    })
    regards.

  4. #4
    Ext User symfony's Avatar
    Join Date
    Apr 2007
    Location
    Germany
    Posts
    36
    Vote Rating
    0
    symfony is on a distinguished road

      0  

    Default


    Thx for this great example. But unfortunately it doesn't work in my case .
    The ajax-Request form myForm.load was send and the json-Callback is ok, too. But in my Form the fields aren't filled. Is there anything wrong?

    init : function() {
    this.detailForm = new Ext.form.Form({
    labelWidth: 75, // label settings here cascade unless overridden
    reader : new Ext.data.JsonReader({
    root: 'UserData'
    }, [
    {name: 'name1', mapping: 'name1', type: 'string'},
    {name: 'name2', mapping: 'name2', type: 'string'},
    {name: 'name3', mapping: 'name3', type: 'string'}
    ])
    });
    this.detailForm.add(
    new Ext.form.TextField({
    fieldLabel: 'Name 1',
    name: 'name1',
    width:175,
    allowBlank:false
    }),
    new Ext.form.TextField({
    fieldLabel: 'Name 2',
    name: 'name2',
    allowBlank:false,
    width:175
    }),
    new Ext.form.TextField({
    fieldLabel: 'Name 3',
    name: 'name3',
    allowBlank:false,
    width:175
    })
    );
    this.detailForm.addButton('Save');
    this.detailForm.addButton('Cancel');
    this.detailForm.end();
    this.detailForm.render('detail_view');
    },
    update : function() {
    this.detailForm.load({url: 'myUrl',params:'name1', waitMsg : 'loading');
    }

  5. #5
    Ext User symfony's Avatar
    Join Date
    Apr 2007
    Location
    Germany
    Posts
    36
    Vote Rating
    0
    symfony is on a distinguished road

      0  

    Default


    Ok, problem fixed.. The Json-Reader, which defined in my Form-initialisation, is not necessary. I only use instead:
    Form.load({url:'url', waitMsg:'loading....'});
    The url gives me back a sting / or object like this:
    {
    "success":true,
    "data":{"name1":"name1val","name2":"name2val","name3":"name3val"}
    }

  6. #6
    Sencha User
    Join Date
    May 2011
    Posts
    2
    Vote Rating
    0
    abal2.antz is on a distinguished road

      0  

    Default


    Hi Reang,

    I newbie in extjs, I want to get value from dialog form to fill textfield in parent form.
    Do you have sample code or URL for this case?

    Thanks

    regards,
    Anton

Similar Threads

  1. (Bug?) EditorGrid and Ext.form.CheckBox on a Dialog
    By christocracy in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Mar 2007, 9:47 AM
  2. IE7 does not fill the Grid (uses JSON)
    By Skeleton in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 26 Feb 2007, 3:08 AM
  3. Form element values from a grid
    By rajesh in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 15 Feb 2007, 3:24 AM
  4. Basic Dialog Form plus submit example?
    By rob30UK in forum Ext 1.x: Help & Discussion
    Replies: 26
    Last Post: 13 Jan 2007, 9:11 AM
  5. Basic Dialog and form submit
    By JC in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 21 Nov 2006, 12:44 AM

Thread Participants: 3