We Keep Coding

In an ExtJS gridpanel, how to use ChainedStore and widgetcolumn to show comboboxes with different values in each row

With ExtJS 5 and 6 a chained store is a store that is a "view" of a source store. The chained store may be sorted & filtered independently without having any impact on the source store.
var mySourceStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name']
});
var myChainedStore = Ext.create('Ext.data.ChainedStore', {
source: mySourceStore
});
And also gridpanels can have a column with comboboxes using the widgetcolumn.
{
xtype: 'widgetcolumn',
text: 'all combos',
widget: {
xtype : 'combobox',
store : myChainedStore,
valueField : 'id',
displayField : 'name',
forceSelection: true
}
}
What I need is each row having another instance of the chained store. And depending on some other value in the row, the chained stored is filtered. In effect the combobox in each row may show a different set of values.
Is it a good approach to use widget columns and chained stores to accomplish this? How would such a solution look like?
PS: Just for the record, these are other approaches that I found to accomplish something similar:
How define differents stores for each cell combobox editor in a grid?
https://www.sencha.com/forum/showthread.php?60618-different-values-for-a-ComboBox-on-each-row-of-an-EditorGrid

You can create instance of store by using:
{
xtype: 'widgetcolumn',
text: 'all combos',
widget: {
xtype : 'combobox',
store : Ext.create('Ext.data.ChainedStore'),
valueField : 'id',
displayField : 'name',
forceSelection: true
}
}

Combobox store loaded but won't display

I want to update the combobox store whenever there is a change in the combobox and display this changed store. My store is loading but combobox won't display it. I can display local store like I want to display but can't do the same for remote json store.
I have a "ProcessController" like this:
onComboboxChange: function(combo, newValue, oldValue) {
var upContainer = combo.up('container');
if(combo.itemId == "cmbServiceList") {
MyApp.app.globals.cmbServiceStore = this.createServiceCmbStore(upContainer.getComponent('cmbServiceList').getRawValue());
}
},
createServiceCmbStore: function(inputData){
var data = {"inputData": inputData};
var mainController = MyApp.app.getController('MainController');
var cmbServiceData = mainController.callService(data,'getServices','json');
var classServices = Ext.JSON.decode(cmbServiceData);
var projectStore = Ext.create('Ext.data.Store', {
fields: ['key', 'text'],
data: classServices
});
return projectStore;
}
init: function(application) {
this.control({
'combobox': {
change: this.onComboboxChange
}
});
_myAppGlobal = this;
},
And it's my combobox in the main viewport:
{
xtype : 'combobox',
anchor : '80%',
listConfig : {
loadingText : 'Searching...',
emptyText : 'No matching posts found.'
},
typeAhead : true,
itemId : 'cmbServiceList',
fieldLabel : 'Servis Adı:',
hideTrigger : true,
displayField : 'text',
store : MyApp.app.globals.cmbServiceStore,
valueField : 'key',
minChars : 1,
queryMode : 'local',
forceSelection: true
}
MyApp.app.globals.cmbServiceStore is a global variable defined in the app.js
When I debug the code I can see the store is loaded but it won't display any stored value in the combobox.

The issue mainly here is, when your combobox is created the MyApp.app.globals.cmbServiceStore is null or undefined, once the combobox is initialized and then you try to define your store it doesn't the combobox as the reference given during initialization to combobox was undefined.
Based on your code it seems that you are just changing the data of the store and not the store fields. So its much better you create the store before combobox initialization and then on combox change you just add the data to store by using store.add
I would recommend another approach, that is add a proxy to your store for the service and just do store.load() on combo change

if(combo.itemId == "cmbServiceList") {
MyApp.app.globals.cmbServiceStore = this.createServiceCmbStore(upContainer.getComponent('cmbServiceList').getRawValue());
upContainer.getComponent('cmbServiceList').bindStore(MyApp.app.globals.cmbServiceStore);
}
instead of
if(combo.itemId == "cmbServiceList") {
MyApp.app.globals.cmbServiceStore = this.createServiceCmbStore(upContainer.getComponent('cmbServiceList').getRawValue());
}
solved the issue.

how to set programmatically field components in grid edit mode

I want to edit a grid with comboxbox and fields.
While editing the selected row, On select event of combobox i want to set some value from database to the field in grid.
I don't know how to set any value in a field control while row is in edit mode.
some one suggested "with an EditorGridPanel you're supposed to assign editing to controls and not directly database" me but i dont know how to.
here is my code
var triprate_idEditor = {
xtype : 'combobox'
, typeAhead : true
, triggerAction : 'all'
, displayField : 'name'
, valueField : 'id'
, store : 'TriprateAllStore'
, queryMode : 'local'
, emptyText : 'Select a name...'
, listeners:
{
select: function(combo, rec) {
console.log(' here');
// var triprateall = Ext.data.StoreManager.lookup('TriprateAllStore');
// triprateall.filter(id:combo.value);
var g = Ext.getCmp('Tripgrid-Id');
//return default value 0
console.log(g.getSelectionModel().selected.items[0].data.triprate);
//get triprate from database, excluded here
//set triprate to 400 but not in editor
g.getSelectionModel().selected.items[0].data.triprate = 400;
//return value 400
console.log(g.getSelectionModel().selected.items[0].data.triprate);
}
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
id: 'TripEditingGrid',
errorSummary: false
});
Ext.define('Fleet.view.grids.TripGrid',
{
extend : 'Ext.grid.Panel',
alias : 'widget.Tripgrid', //xtype
id : 'Tripgrid-Id', //Unique Id
store : 'TripStore',
selType : 'rowmodel',
plugins: [rowEditing],
columns :
[
{
header : 'id'
, dataIndex : 'id'
, width : 80
, field : { xtype : 'numberfield' }
},
{
header : 'triprate id'
, dataIndex : 'triprate_id'
, width : 100
, filter : true
, editor : triprate_idEditor
, renderer : function(value, metaData, record, rowIndex, colIndex, store, view){
return record.data.triprate_name7; //desc column for display in gird
}
},
{
header : 'triprate'
, dataIndex : 'triprate'
, width : 80
, field : { xtype : 'numberfield' }
},
{
header : 'status'
, dataIndex : 'status'
, width : 70
, renderer : formatBoolean
, editor : checkboxEditor
}
]
});

First of all you should use editor property when defining grid columns and put your code defining combobox editor there.

How to load gridcombobox with dynamic datastore correctly?

I am working on a simple grid form which has a combobox and datasource as proxy (like http://goo.gl/2fxP8). The combobox loads properly but when I try to select one of the list items the gridform closes and combobox doesn't close. Can anyone help me out ?
I am planning to extend the combobox onselect function as well so that once the list item is chosen other fields will be loaded dynamically.
searchField = new Ext.form.ComboBox({
store: ds,
name : 'search',
id:'search',
fieldLabel : 'Search',
displayField:'title',
typeAhead: false,
loadingText: 'Searching...',
pageSize:10,
minChars:2,
triggerAction: 'all',
width: 200,
tpl: resTpl,
itemSelector: 'div.search-item',
onSelect: function(record){
/* Set Values to other fields here */
}
}),
The code for saving is :
Ext.Ajax.request
({
url:"some url",
scope:this,
params:
{
},
success: function(objServerResponse)
{
eval("var resultSet = " +objServerResponse.responseText);
if(resultSet.isOk)
{
this.collapse();
}
else
{
}
}
});

i think the problem is you are OVERIDE the onSelect function..
take look here (try to find onSelect), onSelect method is private...
and as you can see, inside onSelect there is collapse function to call by default..
so, if you are overide onSelect.. your combo never collapse by default..
you have to do that manually.. like what kiran said...
and my question is, why did you overide the onSelect function ??..
if you need to do something When the combo was selected, why don't you set it as listeners ??
try change your code :
onSelect: function(record){
/* Set Values to other fields here */
}
with this one :
listeners : {
"select" : function(combo,data,idx){
console.info(data);
}
}

Ext combobox select after store reload doesn't work properly

Here is my combobox configuration
{
xtype : 'combo',
fieldLabel : 'Select Field',
displayField : 'field_name',
valueField : 'field_id',
id : 'fields_combo_id',
store: new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({url:eyefind.config.DATA_RETRIEVAL, method:'GET'}),
baseParams: { subject: 'fields' },
root: 'data',
id: 'field_id',
fields: ['field_name'],
autoload: true
}),
labelStyle : 'font-weight:bold; width:100px',
triggerAction : 'all',
clearFilterOnReset : false,
mode : 'local'
}
I load the store in an external function in this way:
.....
var comboFields = Ext.getCmp('fields_combo_id');
comboFields.store.load();
comboFields.setValue(selectedFieldId);
.....
And so far selectedFieldId has been set but in the visible part I see a value instead of displayText, the store looks fine and I have the value:displayValue pair properly set there.
Do I miss something or do I have to use some other functionality for this part?
My version of Ext is 3.2.0.

You set valuefield : 'field_id', but there is no field_id in store's fields,
{
xtype : 'combo',
fieldLabel : 'Select Field',
displayField : 'field_name',
valueField : 'field_id', //This 'field_id' must be in store fields too.
id : 'fields_combo_id',
store: new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({url:eyefind.config.DATA_RETRIEVAL, method:'GET'}),
baseParams: { subject: 'fields' },
root: 'data',
id: 'field_id', //This id is just for the store, not the record data.
fields: ['field_id','field_name'], // here, i add `field_id`
autoload: true // This should be autoLoad, remember JavaScript is case sensitive.
}),
labelStyle : 'font-weight:bold; width:100px',
triggerAction : 'all',
clearFilterOnReset : false,
mode : 'local'
}
And also, why do you set autoLoad : true if you load it again in your external function?
EDIT
When I run comboFields.setValue(id);, in which my id is assign to one of the field id, it works, and I see displayfield on my combo (no need to dropdown first). But, if, in your case, your combo item has been highlighted, I guess it's because of the version. Unfortunately
I tested it in Ext 3.3.0.

Try the following code.
var selectedFieldValue = Ext.getCmp('fields_combo_id').getRawValue();
var selectedFieldId = Ext.getCmp('fields_combo_id').getValue();
comboFields.setValue(selectedFieldId,selectedFieldValue);