Issue with non-running code

[Enrico.Massone]

Ext.require([
    'Ext.form.*',
    'Ext.data.*'
]);


Ext.onReady(function(){


    Ext.define('customer', {
		extend: 'Ext.data.Model',
		fields: [
			{type: 'int', name: 'id'},
			{type: 'string', name: 'company'},
			{type: 'string', name: 'vat'},
			{type: 'string', name: 'ssn'},
			{type: 'int', name: 'ref_id'}
		]
	});
	
	var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
	
	/*var customer_store = Ext.create('Ext.data.Store', {
							autoDestroy: true,
							model: 'customer',
							autoLoad: true,
							proxy: {
								type: 'ajax',
								url: 'load.php?item=customer',            
								reader: {
									type: 'json',
									successProperty: 'success',
									root: 'data'
								}
							}
					    });*/


    var formPanel = Ext.create('Ext.form.Panel', {
        renderTo: 'form-ct',
        frame: true,
        title:'Edit customer',
        width: 340,
        bodyPadding: 5,
        waitMsgTarget: true,


        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 85,
            msgTarget: 'side'
        },


        reader : Ext.create('Ext.data.reader.Json', {
            model: 'customer',
            successProperty: 'success',
			root: 'data'
        }),
		items: [{
			fieldLabel: 'company',
			name: 'company'
			allowBlank:false,
			afterLabelTextTpl: required
		},{
			fieldLabel: 'vat', //I.V.A.
			name: 'vat'
			allowBlank:false,
			afterLabelTextTpl: required
		},{
			fieldLabel: 'ssn', //fiscal code
			name: 'ssn'
			allowBlank:false,
			afterLabelTextTpl: required
		}/*,{
			xtype: 'combobox',
			fieldLabel: 'reference customer',
			name: 'ref_id',
			store:  customer_store,
			valueField: 'id',		
			displayField: 'company',
			typeAhead: true,
			queryMode: 'remote',
			emptyText: 'Select a customer'
		}*/],


        buttons: [{
            text: 'Load selected customer',
            handler: function(){
                formPanel.getForm().load({
                    url: <?php echo "'load_customer.php?id=".$_GET['id']."',"; ?>
                    waitMsg: 'Loading...'
                });
            }
        }/*, {
            text: 'Submit',
            disabled: true,
            formBind: true,
            handler: function(){
                this.up('form').getForm().submit({
                    url: 'xml-form-errors.xml',
                    submitEmptyText: false,
                    waitMsg: 'Saving Data...'
                });
            }
        }*/]
    });


});

Hello everyone,
I have a problem with code written above, because it doesn't work as I'd like.
That code is inspired by the example called 'Ajax with XML forms' (http://dev.sencha.com/deploy/ext-4.1.../xml-form.html), when the user hits the 'Load selected customer' button a PHP script fetches a record from a MySQL database, encodes fetched data as a JSON string and then sends that string to output stream by using 'echo' instruction.
The code doesn't work as expected, because when I run it the only result I obtain is an empty form, that is a form without any fields.
I have done some debug and I'm sure that 'load_customer.php' works fine: it returns the JSON string I expect.
Any idea to fix my code ?
Thanks in advance.

[scottmartin]

What does your return JSON look like? If you place this in a file and load from there, does it work?

Scott.

[Enrico.Massone]

Hello Scott,
first of all thanks for replying my question. This is a sample of JSON string returned by 'load_customer.php' :

{success:true, "data":[{"id":"2","company":"Studio Araldi","vat":"222","ssn":"STRARD222MI","ref_id":"1"}]}

Note that 'load_customer.php' is called up when the user hits the button named 'Load selected customer', I believe the problems in my code start before this event, because when I load the page on my web browser I don't obtain the form I expect.
I can only see the frame of my form, a blue horizontal line (instead of the fields of my form) and, at the bottom, the button 'Load selected customer'. When I push it, the message 'Saving Data...' is correctly shown, but fields don't appear.
In my intention, I'd like to see a form with three empty fields ('company','vat','ssn') when I load the page on my browser and then, when I hit the load button, I'd like to load required data from a MySQL db via 'load_customer.php' script.

Regards.
Enrico.

[Enrico.Massone]

Sorry, I made a mistake in my previous message, I wrote:

the message 'Saving Data...'

but I meant:

the message 'Loading...'

[Enrico.Massone]

I wrote a new version of my code, it works fine so I've decided to post it here, maybe it could be useful for someone.

Here the code:

<?php    function get_property_id($field,$table,$id)    {        $host = "localhost";        $user = "root";        $password = "";        $db = "report_sys";            $conn = mysql_connect($host,$user,$password);        mysql_select_db($db,$conn);                $query ="SELECT `$field` FROM `$table` WHERE `id`='$id'";        $result = mysql_query($query,$conn);                $row = mysql_fetch_row($result);                return $row[0];            }?>

Ext.require([
    'Ext.form.*',
    'Ext.data.*'
]);


Ext.onReady(function(){
	
	var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';


    Ext.define('customer_model', {
        extend: 'Ext.data.Model',
        fields: [
            {type: 'int', name: 'id'},
            {type: 'string', name: 'company'},
            {type: 'string', name: 'vat'},
            {type: 'string', name: 'ssn'},
            {type: 'int', name: 'ref_id'}
        ]
    });
    
    var formPanel = Ext.create('Ext.form.Panel', {
        renderTo: 'form-ct',
        frame: true,
        title:'Edit customer',
        width: 340,
        bodyPadding: 5,
        waitMsgTarget: true,


        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 85,
            msgTarget: 'side'
        },
        
       reader : Ext.create('Ext.data.reader.Json', {
            model: 'customer_model',
            successProperty: 'success',
			root: 'data'
       }),


       items: [{
            xtype: 'fieldset',
            title: 'Customer Information',
            defaultType: 'textfield',
            defaults: {
                width: 280
            },
            items: [{
                    fieldLabel: 'company',
                    name: 'company',
                    allowBlank:false,
					afterLabelTextTpl: required
                }, {
                    fieldLabel: 'vat',
                    name: 'vat',
                    allowBlank:false,
					afterLabelTextTpl: required
                }, {
                    fieldLabel: 'ssn',
                    name: 'ssn',
                    allowBlank:false,
					afterLabelTextTpl: required
            },{
					xtype: 'combobox',
					fieldLabel: 'reference customer',
					id: 'ref_id_combo',
					name: 'ref_id',
					store: Ext.create('Ext.data.Store', {
								autoDestroy: true,
								model: 'customer_model',
								autoLoad: true,
								proxy: {
									type: 'ajax',
									url: 'load.php?item=customer',            
									reader: {
										type: 'json',
										successProperty: 'success',
										root: 'data'
									}
								}
							}),
					valueField: 'id',
					displayField: 'company',
					typeAhead: true,
					queryMode: 'remote',
					emptyText: ''
			}]
       }],
	   buttons: [{
            text: 'Load',
            handler: function(){
				var form = this.up('form').getForm();
				var combobox = form.findField('ref_id_combo');
                formPanel.getForm().load({
                    url: <?php echo "'update_loader.php?id=".$_GET['id']."&item=customer',"; ?>
                    waitMsg: 'Loading...',
                    success: function(form, action) {
							combobox.setValue(<?php echo get_property_id("ref_id","customer",$_GET['id']);  ?>);
							//combobox.setValue('');
					}
                });
            }
        }, {
			text: 'Save',
			disabled: true,
            formBind: true,
			handler: function() {
				var form = this.up('form').getForm();
				if (form.isValid()) {
					form.submit({
						clientValidation: true,
						url: <?php echo "'update.php?id=".$_GET['id']."&item=customer',"; ?>
						success: function(form, action) {
							Ext.MessageBox.alert('Success','customer was correctly updated',function(btn){
								if (btn == 'ok') {
											window.location = 'layout-browser.html';
								}
							});
							
						},
						failure: function(form, action) {
							Ext.Msg.alert('Error','an error occured');
						}
					});
				}
				else
				{
					Ext.Msg.alert('Error','form is not valid');
				}
			}
		}]
    });
});

At the beginning of my code there's a php function, it retrieves an id from a MySQL table.
That id is used to set the pre-selected item in combo box having id as 'ref_id_combo'.

Regards.