extjs 4 : filling combobox using MYSQL db via PHP script

Question

Hello i'm trying to populate a combobox with data coming from MYSQL database. Using Extjs 4 with the MVC architecture.

Here's the combobox configuration within my view :

         ...
         {
            xtype: 'combobox',
            id: 'cmbMetric',
            name: 'metr',
            mode: 'queryMode',
            querymode : 'lcoal',
            fieldLabel: 'Metric',
            store: 'MetricsData',
            editable: false,
            valign : 'middle',
            margin : 15

        }
        ....

My store :

Ext.define('Metrics.store.MetricsData', {
extend: 'Ext.data.Store',
model: 'Metrics.model.MetricsData',
autoLoad: true,
proxy : {
    type : 'ajax',
    actionMethods : 'POST',
    api : {
    read : 'testmysql.php'
    },
    reader: {
        type: 'json',
        successProperty: 'success',
        messageProperty: 'message',
        root: 'data'
    }
}
});

My model :

Ext.define('Metrics.model.MetricsData', {
extend: 'Ext.data.Model',
fields: [{name : 'name_metric'}]    
});

Finally my PHP script :

<?php   

//database parameters
$user='user'; 
$pw='';
$db='mydb';
$table='metric';

//make database connection
$connection = mysql_connect("localhost", $user, $pw) or
die("Could not connect: " . mysql_error());
mysql_select_db($db) or die("Could not select database");

metricsName();

function metricsName() 
{
$sql = 'SELECT name_metric FROM metric';

$result = mysql_query($sql); // result set

while($rec = mysql_fetch_array($result, MYSQL_ASSOC)){
    $arr[] = $rec;
};

$data = json_encode($arr);  //encode the data in json format

}

?>

I don't know what's wrong or where the error is coming from, but my combobox is never filled. Any help would be much appreciated.

score 1 · Answer 1 · answered Feb 25 '13 at 14:04

1

You need to return echo the $data at the end.

$data = json_encode($arr);  //encode the data in json format
echo $data;

Also your returned data should look something like this:

{
    data: [{ 
              name_metric: 'record1' 
          }, { 
              name_metric: 'record2' 
          }],
    total: 2,
    success: true
}

answered Feb 25 '13 at 14:04

Johan Haest

4,391
28
37

Thank you!! But I also had a problem with connexion to the database, that I solved using this : http://stackoverflow.com/questions/1575807/cannot-connect-to-mysql-4-1-using-old-authentication – salamey Feb 25 '13 at 14:05
Good, it's best you test your script first by going to your php page directly so that you know it outputs the correct data, did the echo solve your problem? – Johan Haest Feb 25 '13 at 14:15

score 0 · Accepted Answer · answered Feb 25 '13 at 14:13

Two things:

Ext seems to like it when you define an id property/field, it defaults to id. You should add the primary key to your sql query and return it in the data either aliased to or named "id", or change the idProperty of the proxy to match the name you send.

ExtJS expects your json to be in a format something like this given how you have that proxy defined

{
    "success": true,
    "message": "OK",
    "data": [
        {
            "id": 1,
            "name_metric": "Value1"
        },
        {
            "id": 2,
            "name_metric": "Value2"
        }
    ]
}

That means that your function should return just the data array, rather than the encoded one, and php should output should go something like this:

    echo json_encode(array(
        'success' => true,
        'message' => "OK",
        'data' => metricsName()
));

Finally, the combo box definition is off. You need to provide at least a valueField definition and create an instance of the store rather than passing it's name
```
{
    xtype: 'combobox',
    store: Ext.create("Metrics.store.MetricsData"),
    displayField: 'name_metric',
    valueField: 'id'
}
```

extjs 4 : filling combobox using MYSQL db via PHP script

2 Answers2