1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default Issue with non-running code

    Issue with non-running code


    Code:
    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,083
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


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

    Code:
    {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.

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


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

    the message 'Saving Data...'

    but I meant:

    the message 'Loading...'

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


    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 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];            }?>
    Code:
    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.

Thread Participants: 1