Related
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);
}
});
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;
}
I am solving a requirement which can be simplified as following. I am fairly new to Ext.js and I need help in achieving the below.
I have 4 tables as follows.
So, I have 3000 companies and 9000 users mapped across various companies. I need to map moderators for each company in a grid.
I have an add button, which adds a row in the grid.
I achieved displaying the companies in the first column of a grid. Easy. So user can pick one.
I achieved displaying users belonging to that company in the second column of the grid. FYI, User can multi select moderators here.
Problem:
At this point, when I add a new row, pick a new company, the companyusers store gets refreshed, so, the values selected in 1st row are not valid values anymore and the first row's user column is displaying empty text (or) only the id's
My models are as follows
Ext.define('Mine.CompanyModel', {
extend: 'Ext.data.Model',
fields: ['Id', {name: 'Name', type:'string'}]});
Ext.define('Mine.UsersModel', {
extend: 'Ext.data.Model',
fields: ['Id', {name: 'Name', type:'string'}]});
Ext.define('Mine.CompanyUsersModel', {
extend: 'Ext.data.Model',
fields: ['company_user_id', 'UserName']}); //<companyuser Id>
Ext.define('Mine.CompanyModeratorModel', {
extend: 'Ext.data.Model',
fields: ['Id', 'CompanyUserId']});
My stores are
Ext.define('Mine.CompanyStore', {
extend: 'Ext.data.Store',
model: 'Mine.CompanyModel',
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
})
});
Ext.define('Mine.UsersStore', {
extend: 'Ext.data.Store',
model: 'Mine.UsersModel',
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
}),
});
Ext.define('Mine.CompanyUserStore', {
extend: 'Ext.data.Store',
model: 'Mine.CompanyUserModel',
autoLoad: false,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
}),
//will add extra params here
});
Ext.define('Mine.CompanyModeratorStore', {
extend: 'Ext.data.Store',
model: 'Mine.CompanyModeratorModel',
autoLoad: false,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
}),
});
My grid columns are
{
text: 'Company', width: '10%', dataIndex: 'id',
renderer: companyRenderer(combo_company), editor: combo_company
},
{
text: 'Users', width: '16%', dataIndex: 'company_user_id',
renderer: companyUsersRenderer(companyUsersCbo), editor: companyUsersCbo
}
My editor is
var companyUsersCbo = Ext.create('Ext.form.ComboBox', {
xtype: 'combo',
id: 'company_users',
name: 'company_users',
valueField: 'Id',
displayField: 'name',
allowBlank: false,
store: 'Mine.CompanyUsersStore',
multiSelect: false,
editable: true,
queryMode: 'local',
pickerAlign: 'bl',
listConfig: {
getInnerTpl: function (display) {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {' + display + '} </div>';
}
}
listeners: {
expand: function () {
var mainGrid = Ext.getCmp('mygrid');
var selmodel = mainGrid.getSelectionModel();
var record = selmodel.getSelection();
if (record[0].get('id') != null) {
this.getStore().getProxy().setExtraParam('company_id', record[0].get('id')); // am storing the company id in a model
this.getStore().load();
}
}
}
});
My renderer is
var companyUsersRenderer = function (combo) {
return function (resources) {
var result = [];
resources = resources || [];
for (var idx = 0, len = resources.length; idx < len; idx++) {
var value = combo.getStore().find(combo.valueField, resources[idx]);
if (value != -1) {
var rec = combo.getStore().getAt(value);
result.push(rec.get(combo.displayField));
}
}
return result.join(', ');
}
}
What am I missing? What should I do so that the values (names) displayed in the combo box remain independent of the next rows.
What have I tried:: I have added a separate hidden column and set it to the names, added to the record. It worked fine, but its not the correct way. Also, when I double click the cell for editing, it shows the numbers (id's and not text) but after I expand, it shows the text.
naga Sandeep,
try to send params with your URL to get filtered records.
like,
url:'someThing/abc/1435'+'id='+record.id;
filter your store accordingly.
Problem is when your grid is rendered, your columns are rendered and your render function uses last state of the combo's store.
I would add a display field to CompanyUsersModel then fill it when a company is selected. Also I would abandon renderer function.
I have to load first grid panel on tab and then load data into store using loadData() function which is working fine, but now I have to integrate infinite grid scrolling with it.
Is there any way to integrate infinite scrolling on fly after loadData into store..? I am using ExtJS 4.1. Please help me out.
Here I am showing my current script in controller and grip view panel in which I have tried out but not working.
Controller Script as below:
var c = this.getApplication().getController('Main'),
data = c.generateReportGridConfiguration(response,true),
tabParams = {
title: 'Generated Report',
closable: true,
iconCls: 'view',
widget: 'generatedReportGrid',
layout: 'fit',
gridConfig: data
},
generatedReportGrid = this.addTab(tabParams);
generatedReportGrid.getStore().loadData(data.data);
On Above script, once I get Ajax call response, adding grid panel with tabParams and passed data with gridConfig param which will be set fields and columns for grid and then last statement supply grid data to grid. I have tried out grid panel settings by following reference example:
http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html
On above page, Included script => http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js
My Grid Panel Script as below:
Ext.define('ReportsBuilder.view.GeneratedReportGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.generatedReportGrid',
requires: [
'ReportsBuilder.view.GenerateViewToolbar',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller',
'Ext.grid.RowNumberer',
],
initComponent: function() {
Ext.define('Report', {extend: 'Ext.data.Model', fields: this.gridConfig.fields, idProperty: 'rowid'});
var myStore = Ext.create('Ext.data.Store', {model: 'Report', groupField: 'name',
// allow the grid to interact with the paging scroller by buffering
buffered: true,
pageSize: 100,
autoSync: true,
extraParams: { total: 50000 },
purgePageCount: 0,
proxy: {
type: 'ajax',
data: {},
extraParams: {
total: 50000
},
reader: {
root: 'data',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}
});
Ext.apply(this, {
dockedItems: [
{xtype: 'generateviewToolbar'}
],
store: myStore,
width:700,
height:500,
scroll: 'vertical',
loadMask: true,
verticalScroller:'paginggridscroller',
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false,
emptyText: [
'<div class="empty-workspace-bg">',
'<div class="empty-workspace-vertical-block-message">There are no results for provided conditions</div>',
'<div class="empty-workspace-vertical-block-message-helper"></div>',
'</div>'
].join('')
},
columns: this.gridConfig.columns,
features: [
{ftype: 'groupingsummary', groupHeaderTpl: '{name} ({rows.length} Record{[values.rows.length > 1 ? "s" : ""]})', enableGroupingMenu: false}
],
renderTo: Ext.getBody()
});
// trigger the data store load
myStore.guaranteeRange(0, 99);
this.callParent(arguments);
}
});
I have also handled start and limit from server side query but it will not sending ajax request on scroll just fired at once because pageSize property in grid is 100 and guaranteeRange function call params are 0,99 if i will increased 0,299 then it will be fired three ajax call at once (0,100), (100,200) and (200,300) but showing data on grid for first ajax call only and not fired on vertical scrolling.
As, I am new learner on ExtJs, so please help me out...
Thanks a lot..in advanced.
You cannot call store.loadData with a remote/buffered store and grid implementation and expect the grid to reflect this new data.
Instead, you must call store.load.
Example 1, buffered store using store.load
This example shows the store.on("load") event firing.
http://codepen.io/anon/pen/XJeNQe?editors=001
;(function(Ext) {
Ext.onReady(function() {
console.log("Ext.onReady")
var store = Ext.create("Ext.data.Store", {
fields: ["id", "name"]
,buffered: true
,pageSize: 100
,proxy: {
type: 'rest'
,url: '/anon/pen/azLBeY.js'
reader: {
type: 'json'
}
}
})
store.on("load", function(component, records) {
console.log("store.load")
console.log("records:")
console.log(records)
})
var grid = new Ext.create("Ext.grid.Panel", {
requires: ['Ext.grid.plugin.BufferedRenderer']
,plugins: {
ptype: 'bufferedrenderer'
}
,title: "people"
,height: 200
,loadMask: true
,store: store
,columns: [
{text: "id", dataIndex: "id"}
,{text: "name", dataIndex: "name"}
]
})
grid.on("afterrender", function(component) {
console.log("grid.afterrender")
})
grid.render(Ext.getBody())
store.load()
})
})(Ext)
Example 2, static store using store.loadData
You can see from this example that the store.on("load") event never fires.
http://codepen.io/anon/pen/XJeNQe?editors=001
;(function(Ext) {
Ext.onReady(function() {
console.log("Ext.onReady")
var store = Ext.create("Ext.data.Store", {
fields: ["id", "name"]
,proxy: {
type: 'rest'
,reader: {
type: 'json'
}
}
})
store.on("load", function(component, records) {
console.log("store.load")
console.log("records:")
console.log(records)
})
var grid = new Ext.create("Ext.grid.Panel", {
title: "people"
,height: 200
,store: store
,loadMask: true
,columns: [
{text: "id", dataIndex: "id"}
,{text: "name", dataIndex: "name"}
]
})
grid.on("afterrender", function(component) {
console.log("grid.afterrender")
})
grid.render(Ext.getBody())
var data = [
{'id': 1, 'name': 'Vinnie'}
,{'id': 2, 'name': 'Johna'}
,{'id': 3, 'name': 'Jere'}
,{'id': 4, 'name': 'Magdalena'}
,{'id': 5, 'name': 'Euna'}
,{'id': 6, 'name': 'Mikki'}
,{'id': 7, 'name': 'Obdulia'}
,{'id': 8, 'name': 'Elvina'}
,{'id': 9, 'name': 'Dick'}
,{'id': 10, 'name': 'Beverly'}
]
store.loadData(data)
})
})(Ext)
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(); }
});