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.

[rogerio.carrasqueira]

Doing this? console.debug(customerStore)?

Thanks

[rogerio.carrasqueira]

Hi! I did a debug and the root: data is not loading the JSON, but the page loads the http file, but the values is not being passed to the root:data. So how can I proceed to fix this?

Thanks

[Animal]

Debug properly. Step through the Store's code that the Proxy calls when it gets the data.

[rogerio.carrasqueira]

Almost solved! But another problem appeared, let me show my code:

// Created a proxy to access the Json 
var customerProxy = new Ext.data.HttpProxy({
      
    api: {
        read : '/core/json/customer/list/',
    }
});

// Created a reader to read the JSON data
var customerReader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'pk',
    root: 'data',
    messageProperty: 'message'  // <-- New "messageProperty" meta-data
}, [
    {name: 'pk'},
    {name: 'name', mapping: 'fields.name'}
]);

// Build a new way to store the data retrieved from JSON
var customerStore = new Ext.data.Store({
        
    id : 'customers',
    proxy: customerProxy,
    reader: customerReader,
    autoLoad: true
    
});

// And the Combo Box
var customerCombo = new Ext.form.ComboBox({
    
    store: customerStore,
    displayField: 'name',
    valuefield: 'pk',
    typeAhead: false,
    triggerAction: 'all',
    editable: false,
    anchor: '95%',
    allowblank: false,
    mode: 'remote'
    
});

customerStore.load();

The data is appearing at the combo box, but another problem appeared: I want to post the numbered value as described at valuefield: 'pk', but it is posting the valued at displayField

data{"fields.customer.name":"All Match","pk":13}

So any ideas to help to solve this?