Develop Reference

Problems loading the storage in the renderer for the combobox field

My field looks like this:
...
{
xtype: 'gridcolumn',
text: 'MyField',
dataIndex: 'contragent',
editor: {
xtype: 'combobox',
allowBlank: false,
displayField:'name',
valueField:'id',
queryMode:'remote',
store: Ext.data.StoreManager.get('ContrAgents')
},
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
store_ca = Ext.data.StoreManager.get('ContrAgents');
if (record.data.contragent != ''){
store_ca.load();
var contr = store_ca.getById(record.data.contragent);
//indexInStore = store_ca.findExact('id', value);
console.log(contr);
return contr.data.name;
}
}
},
...
Store 'ContrAgents' looks like this:
Ext.define('BookApp.store.ContrAgents', {
extend: 'Ext.data.Store',
model: 'BookApp.model.ContrAgents',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'app/data/Contragents.json'
}
});
The problem is that the name of the required field is not returned (contr.data.name), contr is null.
Apparently the store does not have time to load, in this case I need to load it, but store_ca.load () does not bring results.
How to load the store correctly to use
store_ca.getById (record.data.contragent); to return the name of the field?

I'm not entirely sure why you would need to use a store to populate the value in the grid's cell, because you could always just send the text value through the grid's store as opposed to the id.
You probably have a good reason for doing it, so I've revisited the fiddle and implemented it accordingly. You should be able to check it out here
The changes
../app/store/ContrAgents.js
Ext.define('Fiddle.store.ContrAgents', {
extend: 'Ext.data.Store',
model: 'Fiddle.model.ContrAgents',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'Contragents.json'
}
});
../app/store/ListViewStore.js
Ext.define('Fiddle.store.ListViewStore', {
extend: 'Ext.data.Store',
model: 'Fiddle.model.ListViewModel',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'List.json'
}
});
../app/view/ListView.js
Ext.define('Fiddle.view.ListView' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.booklist',
itemId: 'BookList',
store: 'ListViewStore',
xtype: 'listview',
plugins: 'gridfilters',
initComponent: function() {
var me = this;
// Pin an instance of the store on this grid
me.myContrAgents = Ext.data.StoreManager.lookup('ContrAgents');
// Manually load the 'ContrAgents' first
me.myContrAgents.load(function(records, operation, success) {
// Now load the 'ListViewStore' store
me.getStore().load();
});
me.columns = [
{
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 35
},
{
text: 'Контрагент',
dataIndex: 'contragent',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
if (value > 0) {
if (rec = me.myContrAgents.findRecord('id', value)) {
return rec.get('name');
}
}
return '';
}
}
];
me.callParent(arguments);
}
});
Data/List.json
"data" : [
{"id": 1, "contragent": "2"},
{"id": 2, "contragent": "3"},
{"id": 3, "contragent": "4"}
]

You are trying to query the store before it's data is actually populated. You want to avoid loading the store for each time the renderer event is triggered.
The Ext.data.Store->load function is asynchronous
See docs
store.load({
scope: this,
callback: function(records, operation, success) {
// the operation object
// contains all of the details of the load operation
console.log(records);
}
});
Change your implementation to this and test if it works
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
store_ca = Ext.data.StoreManager.get('ContrAgents');
if (record.data.contragent != ''){
store_ca.load(function(records, operation, success) {
console.log('loaded records');
var contr = store_ca.getById(record.data.contragent);
indexInStore = store_ca.findExact('id', value);
console.log({
contr: contr,
indexInStore: indexInStore
});
});
// Not sure what you are trying to return here
// return contr.data.name;
}
}
Remote Combo in ExtJS Grid Example
I found a good example for what you are trying to accomplish here with a combo dropdown in a grid with a remote store, check out this post (you might have to register for free but the solution is worth it and I won't plagiarise it here)
Grid with combo edit widget with binding
Perhaps this could help...
Ext.define('Fiddle.view.ListView' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.booklist',
itemId: 'BookList',
store: 'ListViewStore',
xtype: 'listview',
plugins: ['cellediting','gridfilters'],
initComponent: function() {
this.columns = [
{
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 35
},
{
text: 'Контрагент',
width: 150,
xtype: 'widgetcolumn',
dataIndex: 'contragent',
widget: {
xtype: 'combo',
bind: '{record.contragent}',
allowBlank: false,
displayField: 'name',
valueField: 'id',
store: Ext.data.StoreManager.lookup('ContrAgents')
}
}
];
this.callParent(arguments);
}
});

How to get all values from combobox selected record?

I've a combobox which returns 10 values from DB;
Ext.define('Iso3Combo', {
extend:'',
xtype:'iso3combo',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
name: iso3
fieldLabel: iso3,
displayField:'iso3', // takes from DB
valueField:'id', // takes from DB
store: {
proxy: {
type: 'ajax',
url: ...getUrl() + '/country/list',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
},
queryMode: 'local',
autoLoad:true,
bind: '{currRec.iso3}',
listeners: {
fn: function () {
console.log('isocombo listeners...');
},
select: this.getIso3,
change: this.getIso3,
scope: this
}
});
As you will notice above; combobox's displayed content is iso3 and gets id as primary key. Therefore I can not change valueField. So tried this function to reach some other value for that selected combobox record;
getIso3: function () {
var me = this;
// var rec = me.getSelectedRecords(); //says getSelectedRecords is not a function
var country = me.down('[name=iso3]').getValue(); // returns 'id'
// var isoCode = rec.data.iso3; //Couldn't be success to verify if I get correct value..
How can i be able to load all values of DB from selected combobox record and select one of them?

You need to use combobox.getSelection() or combobox.getSelectedRecord(). This both method will return you selected record. Or inside of select event you will get selected record in second parameter so also you can get iso3 value like this record.get('iso3').
Here is an FIDDLE, I have created a demo using form and combobox. This will help you or guide you to solve your problem.
I am using this COUNTRY JSON.
Code Snippet
// The data store containing the list of Country
var country = Ext.create('Ext.data.Store', {
fields: ['iso3', 'id'],
proxy: {
type: 'ajax',
url: 'countryList.json',
reader: {
type: 'json',
rootProperty: 'countrylist'
}
},
autoLoad: true
});
// Create form with the combo box, attached to the country data store
Ext.create('Ext.form.Panel', {
title: 'Country List Example with ComboBox',
bodyPadding: 10,
items: [{
xtype: 'combo',
fieldLabel: 'Choose Country',
store: country,
queryMode: 'local',
displayField: 'iso3',
valueField: 'id',
listeners: {
select: function (field, record) {
Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`);
}
}
}],
renderTo: Ext.getBody(),
buttons: [{
text: 'Get Combo Value/Record on button click',
handler: function () {
var record = this.up('form').down('combo').getSelectedRecord();
if (record) {
Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`)
} else {
Ext.Msg.alert('Info', 'Please select contry first.. :)');
}
}
}]
});

handler: function () {
var selectionmodel=this.up().down('multiselect');
var values=selectionmodel.values;
}

How to load a nested model into a Extjs form using loadRecord

I've created a script to dynamically generate a form, but I'm having problem loading the data of the nested model. I've tried loading the whole record and I've tried loading each sub store, but neither works.
I've through about using form.load(), but from my understanding that requires a proxy connection and also require to store json data inside a 'data' array.
Does anyone have any suggestions on how might I approach this problem?
<div id="view-#pageSpecificVar" class="grid-container even"></div>
<div id="button"></div>
<script>
Ext.define('HeaderForm', {
extend: 'Ext.form.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
id: Ext.id(),
defaultType: 'textfield'
});
me.callParent(arguments);
}
});
// Define our data model
Ext.define('HeaderModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'HeaderSequence', type: 'int'}
],
hasMany:[
{ name: 'Columns', model: 'ColumnModel' }
],
proxy: {
type: 'ajax',
actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' },
url: '#Url.Content("~/Test/Header")',
timeout: 1200000,
},
});
Ext.define('ColumnModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ColumnWidth', type: 'float'}
],
hasMany:[
{ name: 'Fields', model: 'FieldModel'}
],
belongsTo: 'HeaderModel'
});
Ext.define('FieldModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'XType', type: 'string'},
{ name: 'FieldLabel', type: 'string'},
{ name: 'Name', type: 'string'},
{ name: 'Data', type: 'string'},
{ name: 'FieldSpecify', type: 'bool'}
],
belongsTo: 'ColumnModel'
});
var store = Ext.create('Ext.data.Store', {
storeId: 'HeaderStore',
model: 'HeaderModel',
autoDestroy: true,
listeners: {
load: function (result, records, successful, eOpts) {
//console.log(result);
var form = dynamicForm(records[0]);
form.add(submitButton);
form.render('view-#pageSpecificVar');
}
}
});
store.load();
var dynamicForm = function(record) {
var form = new HeaderForm();
var columnContainer = new Ext.widget({
xtype: 'container',
layout: 'column'
});
var formItems = new Ext.util.MixedCollection();
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.iterate(item.data, function (key, value) {
var fieldContainer = new Ext.widget({
xtype: 'container',
columnWidth: value
});
Ext.each(item.FieldsStore.data.items, function(item) {
if(item.data["FieldSpecify"]) {
fieldContainer.add(new Ext.widget({
xtype: item.data["XType"],
fieldLabel: item.data["FieldLabel"],
name: item.data["Name"],
//value: item.data["Name"]
}));
}
}, this);
columnContainer.add(fieldContainer);
}, this);
}, this);
formItems.add(columnContainer);
form.add(formItems.items);
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
form.loadRecord(fields);
});
});
//form.loadRecord(record);
return form;
};
var submitButton = new Ext.widget({
xtype: 'toolbar',
dock: 'bottom',
items:[{
xtype: 'button',
text: 'Save',
handler: function(button) {
var basic = button.up('form').form;
basic.updateRecord(basic.getRecord());
var store = Ext.StoreMgr.get('HeaderStore');
store.each(function(record) {
record.dirty = true;
});
store.sync();
}
}]
});
</script>
Update
Sorry I probably didn't made it very clear. I'm having problem loading the store data into form fields. For static forms I normally use loadRecord to load the nested model into a form, but in this case all the fields are nested in their own little model, so would there be a way to load each nested model value into their own field with loadRecord?
The HeaderModel stores field set information.
The purpose of ColumnModel is to create the container that will surround a set of fields, for styling purpose. It simply creates two columns of fields.
The FieldModel stores the field specific attributes and data.
Here's an example of response json data...
{
"HeaderSequence":1,
"Columns":[{
"ColumnWidth":0.5,"Fields":[
{"XType":"textfield","FieldLabel":"FieldA","Name":"NameA","Data":"A","FieldSpecify":true},
{"XType":"textfield","FieldLabel":"FieldB","Name":"NameA","Data":"B","FieldSpecify":true}]
},{
"ColumnWidth":0.5,"Fields":[
{"XType":"textfield","FieldLabel":"FieldA2","Name":"NameA2","Data":"A2","FieldSpecify":true},
{"XType":"textfield","FieldLabel":"FieldB2","Name":"NameB2","Data":"B2","FieldSpecify":true}]
}
]
}
Thanks

I've figure out how to load the nested model into the form. We can't simply use load or loadRecord, as by default that method tries to get a model's data and iterate through the data object and call setValues.
What I have to do is manually get the basic form element and call setValues myself to assign the values.
// loop through each field store to load the data into the form by field id
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
form.getForm().setValues([{ id: fields.data['Id'], value: fields.data['DisplayName'] }]);
});
});
To Follow up with that, a custom submit handler needs to be put in place as well.
Which loops through the store and sets the submitted value to store before sync the store.
// define form submit button
var submitButton = new Ext.widget({
xtype: 'toolbar',
dock: 'bottom',
items:[{
xtype: 'button',
text: 'Save',
handler: function(button) {
// get basic form for button
var basic = button.up('form').form;
// get form submit values
var formSubmitValues = basic.getValues();
// get header store
var store = Ext.StoreMgr.get('HeaderStore');
// loop through each field store and update the data values by id from the form
store.each(function(record) {
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
fields.data['Data'] = formSubmitValues[fields.data['Id']];
});
});
// mark the record as dirty to be sync
record.dirty = true;
});
// sync store object with the database
store.sync();
}
}]
});

Have a look at this and this examples on how to load nested data into a nested model. You will also see how to access the associated data.
I'm not sure why you use record.ColumnsStore.data.items, as if record is of HeaderModel type, you should really get the columns store via record.Columns, and then iterate that store.
Would also help to see what JSON your server returns.

Sencha ExtJS 4 Linked Combobox Issue

I'm experimenting what seems to be a bug in ExtJS 4 Combobox AJAX Store.
I have a grid with articles, each article has a supplier and a category, each supplier offer articles that belong to a certain category. In order to filtre the grid i've put 2 Combos(Select Lists). One for supplier and one for category. These combos get their values by AJAX from a php script.
Everything went good till i tried to link the combos like this:
When the user selects a category from the combobox, the supplier Store refreshes with suppliers that offer that category (works fine!).
The the user selects a supplier from the combobox, and the category Store refreshes(refresh is good, as seen with firebug).
Here is my issue now, if the user selects the category combobox again it, the loading mask doesn't go away so it can't change the value of the combo.
I've tested and the AJAX is working fine, it's just a EXTJS 4 issue with the Loading Mask.
The issue is happening both ways:
A)
1. User selects a category
2. User selects a supplier
3. User CAN'T select a category(loading mask doesn't go away)
AND
B)
1. User selects a supplier
2. User selects a category
3. User CAN'T select a supplier(loading mask doesn't go away)
EDIT:
The problem seems to also occur on these situation(and vice-versa: supplier->category)
1. User selects a category
2. User changes the category
3. User CAN'T select a supplier(loading mask doesn't go away)
Here are my models:
Ext.define('Category', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name'},
{ name: 'id'}
]
});
Ext.define('Supplier', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name'},
{ name: 'id'}
]
});
Here are my stores:
var categoryStore = Ext.create('Ext.data.Store', {
model: 'Category',
autoLoad: true,
remoteSort: true,
proxy: {
type: 'ajax',
url: 'GetCategorysForSupplier',
reader: {
type: 'json',
root: 'items'
},
extraParams: {
supplier: 0
}
}
});
var supplierStore = Ext.create('Ext.data.Store', {
model: 'Supplier',
autoLoad: true,
remoteSort: true,
proxy: {
type: 'ajax',
url: 'getSuppliersForCategory.php',
reader: {
type: 'json',
root: 'items'
},
extraParams: {
category: 0
}
}
});
And here are my combos:
var categoryFilterCombo = Ext.create('Ext.form.field.ComboBox', {
xtype: 'combo',
store: categoryStore,
displayField: 'name',
valueField: 'id',
fieldLabel: 'Category Filter',
listeners: {
change: function(field,newVal) {
if (Ext.isNumeric(newVal)) {
supplierStore.proxy.extraParams.category = newVal;
articleStore.proxy.extraParams.category = newVal;
supplierStore.load();
articleStore.load();
}
}
}
});
var supplierFilterCombo = Ext.create('Ext.form.field.ComboBox', {
store: supplierStore,
displayField: 'name',
queryMode: 'local',
valueField: 'id',
fieldLabel: 'Supplier Filter',
listeners: {
change: function(field,newVal) {
if (Ext.isNumeric(newVal)) {
categoryStore.proxy.extraParams.supplier = newVal;
articleStore.proxy.extraParams.supplier = newVal;
categoryStore.load();
articleStore.load();
}
}
}
});
Kind Regards,
Dan Cearnau

Look here for the answer: http://www.sencha.com/forum/showthread.php?152324-4.0.7-ComboBox-bug-with-load-mask
There ldonofrio says:
This is a 4.0.7 bug, seems to be solved in 4.1pr
My override
PHP Code:
Ext.override(Ext.LoadMask, {
onHide: function() { this.callParent(); }
});

extjs rowselect is not working

I am creating a grid panel and want to attach an event with each row. following is my code
var locationdata = Ext.create('Ext.data.Store', {
fields:['name'],
storeId:'simpsonsStore',
data:{'items':[
{ 'name': 'Lisa'}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
hintBox = Ext.create('Ext.grid.Panel', {
title: 'Location List',
store: locationdata,
columns: [
{ header: 'Name', dataIndex: 'name' , flex:1 }
],
flex: 5
});
hintBox.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
alert("row selected");
});
I am adding hintBox in anothor panel which is rendered to body.
What is wrong with this code?

Selection model has no event 'rowselect', In Extjs 4 selectiom model has only selectionchange event.
hintBox.getSelectionModel().on('selectionchange', function(sm, selectedRows, opts) {
//selected rows is an array of models and if you want just one row selected,
//you have to config the grid so it only accepts one selection i think is selType: 'SINGLE' or 'SIMPLE'
// and after that selectedRows[0] will be the selected row
alert("rows selected");
});