PDA

View Full Version : Problems to render a combox on grid



rogerio.carrasqueira
27 Aug 2010, 12:29 PM
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
27 Aug 2010, 1:51 PM
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
27 Aug 2010, 3:09 PM
Hi!

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

Thanks

Rogério

Animal
27 Aug 2010, 11:19 PM
At what point do you load that Store?

rogerio.carrasqueira
28 Aug 2010, 5:59 AM
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
28 Aug 2010, 7:40 AM
So debug the Store. Looks like it's not getting loaded.

rogerio.carrasqueira
28 Aug 2010, 7:43 AM
Doing this? console.debug(customerStore)?

Thanks

rogerio.carrasqueira
28 Aug 2010, 8:01 AM
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
28 Aug 2010, 2:41 PM
Debug properly. Step through the Store's code that the Proxy calls when it gets the data.

rogerio.carrasqueira
28 Aug 2010, 2:45 PM
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?

Animal
29 Aug 2010, 1:32 AM
what is posting? You using a writable Store?

j-joey
29 Aug 2010, 5:49 AM
javascript is case sensitive. so you should use "valueField" not "valuefield" at your config

rogerio.carrasqueira
29 Aug 2010, 7:46 AM
Yes, you are right. I fixed this and now is working thanks!

rogerio.carrasqueira
30 Sep 2010, 6:58 AM
Another question? This combo is being rendered at a grid. When I select the option and do a 'tab' to another field on the grid the value information that the grid displays is the id value instead of the text value. How to fix this? I researched at the internet and add the hiddenName at combo could be fix this, but it works only on forms not in grids. Do you know any workaround to deal with this?

Thanks so much?

Animal
30 Sep 2010, 7:28 AM
The ID is what you should be storing in the Store for that Grid.

And then you should be using a column renderer to show any description.

rogerio.carrasqueira
30 Sep 2010, 10:41 AM
Did you mean, to do this?



var customerStore = new Ext.data.Store({
id : 'customers',<-- Here my ID for the store
proxy: customerProxy,
reader: customerReader,
autoLoad: true
});



And pass it to:



var customerCombo = new Ext.form.ComboBox({
store: customerStore,
displayField: 'name',
valuefield: 'pk',
hiddenName: 'customers',<-- The same name for the Store ID
typeAhead: false,
triggerAction: 'all',
editable: false,
anchor: '95%',
allowblank: false,
mode: 'remote'
});


About the column render can you show me a small example?