Problems to render a combox on grid

[rogerio.carrasqueira]

Hi Everybody!

I'm a newbie at ExtJs and I'm having some problems to work with Ext Combox on a Grid Panel. Let me explain my problem:

1 - Have a grid where it loads data from a JSON file and fill in the cell on the grid with this data.
2 - On this grid I have a field that use a Combo Box that depends from another JSON file to populate the data and show the options to choose and submit the data row to a post and save it on the database.
3 - But, unfortunately I don't know why the data that is loaded from Json is not beeing loaded to the combo box. Believe, I tried many ways but no one worked. If you click at the combobox no data appear (it should appear my customer's list)

I did this implementation that I will show to you, so I wish that can be helpful to understand my problem:

Here is the code that builds the combox box:

var customerStore = new Ext.data.Store({
        
    storeId : 'customerStore',
    autoDestroy : true,
    url : '/core/json/customer/list/',
    remoteSort : false,
    idProperty : 'pk',
    root: 'data', 
    fields : [{ name: 'customer_id', mapping: 'pk', type:'integer'},
              { name: 'customer_name', mapping: 'fields.name', type:'string'}]
});

var customerCombo = new Ext.form.ComboBox({
    
    store: customerStore,
    displayField: 'customer_name',
    valuefield: 'customer_id',
    hiddenName:'customer',
    typeAhead: false,
    triggerAction: 'all',
    editable: false,
    anchor: '95%',
    allowblank: false,
    mode: 'local'
});

Here is the code that will be used to populate the data on combox, note that I will not use all the fields:

{"success": true,
 "message": "Loaded data", 
"total": 2, 
"data": [
              {"pk": 59, 
               "model": "core.customer", 
               "fields": {
                    "phone_number": "000",
                    "cnpj": "000",
                     "name": "asdad",
                    "corporate_email": "rogerio.carrasqueira@gmail.com",
                    "date_created": "2010-08-24 11:13:44",
                    "contact_name": "000"}
             }, 
             {"pk": 60,
              "model": "core.customer",
              "fields": {
                    "phone_number": "00",
                    "cnpj": "0000",
                    "name": "All Match",
                    "corporate_email":
                    "rogerio.carrasqueira@directflow.com.br", 
                    "date_created": "2010-08-24 12:31:54",
                    "contact_name": "Rog\u00e9rio"}
              }
      ]
}

Here is the code that builds the grid:

var textField =  new Ext.form.TextField();

var userColumns =  [
    
    {header: "ID", width: 40, sortable: true, dataIndex: 'pk'},
    {header: "Usuário", width: 100, sortable: true, dataIndex: 'username', editor: textField},
    {header: "Primeiro Nome", width: 100, sortable: true, dataIndex: 'first_name', editor: textField},
    {header: "Sobrenome", width: 100, sortable: true, dataIndex: 'last_name', editor: textField},
    {header: "E-mail", width: 100, sortable: true, dataIndex: 'email', editor: textField},
    {header: "Ativo?", width: 100, sortable: true, dataIndex: 'is_active', editor: textField},
    {% if request.user.is_staff %}
    {header: "Cliente", width: 130, sortable: true, dataIndex: 'customer_name', editor: customerCombo},
    {% else %}
    {header: "Cliente", width: 130, sortable: true, dataIndex: 'customer_name'},
    {% endif %}
    {header: "Criado em:", width: 100, sortable: true, dataIndex: 'date_created'},
    {header: "Último Login em:", width: 100, sortable: true, dataIndex: 'last_login'},
   
];


Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var userGrid = new App.user.Grid({
        renderTo: 'user-grid',
        store: store,
        columns : userColumns, // aqui acontece a montagem do grid
        listeners: {
            rowclick: function(g, index, ev) {
                var rec = g.store.getAt(index);
            },
        }
    });
});

And

So, if someone can help me with this issue I will thanks so much.

Greetings from Brazil

Rogério Carrasqueira

[laurentParis]

I suggest to you this modifications

var customerStore = new Ext.data.Store({
    autoLoad: true,                                               //    >add
    storeId : 'customerStore',
    autoDestroy : true,
    url : '/core/json/customer/list/',
    remoteSort : false,
    idProperty : 'pk',
    root: 'data', 
    fields : [{ name: 'customer_id', mapping: 'pk', type:'integer'},
              { name: 'customer_name', mapping: 'fields.name', type:'string'}]
});

var customerCombo = new Ext.form.ComboBox({
    store: customerStore,
    displayField: 'customer_name',
    valueField: 'customer_id',
    hiddenName:'customer',
    typeAhead: false,
    triggerAction: 'all',
    editable: false,
    anchor: '95%',
    allowBlank: false,
    mode: 'remote'                                               //    >modify
}); 

[rogerio.carrasqueira]

Hi!

Thanks for your help! I've added and not worked, any more ideas?

Thanks

Rogério

[Animal]

At what point do you load that Store?

[rogerio.carrasqueira]

Hi!

I tried to put autoLoad: true and before the combo I've put customerStore.load() but no one has effect to appear the data in the combo box. Any idea?

Thanks

Rogério Carrasqueira

[Animal]

So debug the Store. Looks like it's not getting loaded.