when trying to populate A ENTIRE GRID using the ajax from a combobox in the select listener when i try to recall or reload the datastore i'm still getting the old values, instead of the new ones. i have to get the new values because according to the parameter selected in the combobox the textfields and the others editor will populate with that json data read from server using ajax, accoding with another combobox that fetch remote data
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
id: 'ci',
header: 'Periodo Declarado',
dataIndex: 'ci',
width: 150,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform: 'PerDecl',
lazyRender: true,
listClass: 'x-combo-list-small',
mode:'local',
listeners:{
expand: function (combo){
//alert("asd");
},
collapse: function(combo,record,number){
},
select:function(v, params, record){
ds_random_employee_data_active.remove();
var varAnio2=v.getValue();
var ds_random_employee_data_active2=ds_random_employee_data_active;
ds_random_employee_data_active2.load({ params: { anio: varAnio2 } });
Ext.each(ds_random_employee_data_active2.data.items, function(record){
alert(record.data.ut);
});
//setTimeout("tres("+ v +"[]);",1000);
}}
})
}
***********others columns************************
[SOLVED] THANKS U ALL for say i figure it out after four hours or more the way i did is seemed to bmoeskau but i did read the post of bmoeskau after i've got with the solution
thanks u to all
store.load({params:{anio:varanio},callback:function(){// here comes the loop or another instruction
}})
this is a nice forum chat
That's because it loads asynchronously.
If you (re)load a data store, the call is asynchronous, so any action that relies on the updated data must be done within a callback. You can handle the store's load event to do that. See my answer here for an example.
Related
I've got a dx-select-box in AngularJS that loads an array with around 3k rows, which makes performance very slow. I would like to enable paging, but I haven't found the way to do it. I've followed the documentation:
Array data binding doc: https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Data_Binding/Simple_Array/Array_Only/
Enable paging on select box:
https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Enable_Paging/
But no matter what I haven't been able to put the two of them together and get them working. I have also tried this solution with no luck.
Here's the HTML code:
<div id="stockShelfs" dx-select-box="vm.stockShelfsOptions"></div>
And here's the JS:
this.stockShelfsOptions = {
valueExpr: 'stockShelfId',
displayExpr: 'name',
searchExpr: 'name',
searchEnabled: true,
acceptCustomValue: true,
value: this.product.stockShelfId,
placeholder: translate('POr_VelgStockShelf'),
bindingOptions: {
dataSource: 'vm.stockShelfs',
},
Does anyone know how this could be achieved, if possible?
I got it working by getting rid of the bindingOptions config:
dataSource: new DevExpress.data.DataSource({
store: new DevExpress.data.ArrayStore({
data: vm.stockShelfs,
key: "stockShelfId",
paginate: true,
pageSize: 1
})
}),
And then doing the two way binding inside the onCustomItemCreating function
I am trying to use Ext's (4.1.1) buffered store/grid combination with data, which I cannot access directly through a rest Api.. or so, but the incoming data is handled by my controller and want just add this data to the buffered grid.
And here comes the problem, when I load 500 items directly to the store, the buffering is working.. Only items which I can see gets rendered, but when I start to store.add(items) then they all gets automatically rendered..
So this is my store & grid:
Store
this.store = Ext.create('Ext.data.ArrayStore', {
storeId: 'reportDataStore',
fields: [
{ name: 'html'}
],
buffered: true,
pageSize: 100,
autoLoad: true
});
Grid
{
xtype: 'gridpanel',
flex: 1,
hideHeaders: true,
store: this.store,
verticalScroller: {
rowHeight: 43
},
disableSelection: true,
columns: [
{ header: '', dataIndex: 'html', flex: 1 }
]
}
Data Controller
...
// somewhere in initialization process of the controller,
// I take the reportDataStore, for later reusing
this.reportDataStore = Ext.getStore('reportDataStore');
...
onNewData: function(data) {
this.reportDataStore.add(data)
}
So my expectation was, that data will get into the store, but only the visible data will get rendered.. Now it is so, that all new data gets rendered.
I wasn't able to produce a working example with the code you give, but I've got something close... How did you even manage to add records to a buffered store backed by a memory proxy?
You should try to push your new data to the proxy directly, and then reload the store, like so:
store.proxy.data.push(data);
grid.view.saveScrollState();
// should probably have been a call to reload(), but then the loading never ends...
store.load({
callback: function() {
grid.view.restoreScrollState();
}
});
See this fiddle that tries to reproduce your setup.
UPDATE -
I HAVE ALSO MADE A MOCK IN JSFIDDLE http://jsfiddle.net/mAgfU/371/
AND WITH A FORM PANEL : http://jsfiddle.net/kA6mD/2/
I have the bellow comboox.
When I use the following code to set the form values:
this.form.loadRecord(data);
the entire form is acting ok except from the combo.
instead of giving me the displayField, I get the valueField in the display.
As you can see in the image above, the combo should show the word "Walla" (displayField) instead of "1" (valueField)
Ext.define('App.view.ForeignCombo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.foreigncombo',
queryMode: 'local',
displayField: 'Name',
valueField: 'Id',
editable: false,
matchFieldWidth: false,
constructor: function(config) {
Ext.apply(this, config);
Ext.define('BrnadComboModel', {
extend: 'Ext.data.Model',
fields: ['Id', 'Name']
});
this.store = Ext.create('Ext.data.Store', {
model: 'BrnadComboModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/api/Brand/',
reader: {
type: 'json',
root: 'Results'
}
},
pageSize: 50,
});
this.callParent();
}
}
);
this is how I use it:
{
"xtype": 'foreigncombo'
, "name": 'Brand.Id'
, "fieldLabel": 'Brand.Id'
}
There is no race bewtween the form display and the combo ajax request, the combo store is autoLoad:true, meaning I see that it has already been loaded...
Thanks
I used your fiddle a an example. Place a breakpoint in line 87 (Ext.ComponentQuery.query('comobobox')....), in this fiddle http://jsfiddle.net/kA6mD/9/, and set a watch to Ext.ComponentQuery.query('combobox')[0].store.data.. you'll notice the store has no data. This may be linked to what I mentioned in the comment.
I know there must be a better way of doing this, but what I usually use as a workaround is either load the store at some point before in the app or use a synchronous Ext.Ajax.request and load each record at a time in the store.
As this is a combo for brands I suppose you could load the store before (i.e. app load) and lookup for the store instead of creating a new one each time you create a foreigncombo component, so the first solution should work.
As for the second workaround it should also work, it takes a little bit more coding but its actually pretty easy. It should look something like this...
Ext.Ajax.request({
url:'your/url/',
async:false,
.....
success:function(response){
var records = Ext.JSON.decode(response.responseText);
for(var m=0; m<records.length; m++){
var record = Ext.create('YourBrandModel',{
abbr:records[m].abbr,
name:records[m].name
});
store.add(record);
}
}
})
You should do this as few times as possible as it may slow down the user experience if it gets called everytime you create a "foreigncombo", so checking if this store exists before creating one might be a good idea.
Please take in cosideration that I have not tested this code, so you may have to tweak it a little in order for it to work. But it should get you on tracks.
I got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes
I have a combo box which populates its values based on the selection of another combobox.
I have seen examples where the params in the underlying store are changed based on the selection, but what I want to achieve is to change the store itself of the second combo based on the selection on the first combo. This is my code, but it doesn't work. Can someone please help?
{
xtype: 'combo',
id: 'leads_filter_by',
width: 100,
mode: 'local',
store: ['Status','Source'],
//typeAhead: true,
triggerAction: 'all',
selectOnFocus:true,
typeAhead: false,
editable: false,
value:'Status',
listeners:{
'select': function(combo,value,index){
var filter_to_select = Ext.getCmp('cmbLeadsFilter');
var container = filter_to_select.container;
if (index == 0){
filter_to_select.store=leadStatusStore;
filter_to_select.displayField='leadStatusName';
filter_to_select.valueField='leadStatusId';
} else if(index==1) {
filter_to_select.store=leadSourceStore;
filter_to_select.displayField='leadSourceName';
filter_to_select.valueField='leadSourceId';
}
}
}
},
{
xtype: 'combo',
id: 'cmbLeadsFilter',
width:100,
store: leadStatusStore,
displayField: 'leadStatusName',
valueField: 'leadStatusId',
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
typeAhead: false,
editable: false
},
That is not how its designed to work!! When you set a store in the config, you are binding a store to the combo. You don't change the store, instead you are supposed to change the data when required.
The right way of doing it would be to load the store with correct data from the server. To fetch data, you can pass params that will help the server side code get the set of options you need to load.
You will not want to change the store being used... Simply put, the store is bound to the control as it is instantiated. You can, however, change the URL, and params/baseParams used in any additional POST requests.
Using these params, you can code your service to return different sets of data in your combo box's store.
For the proposed problem you can try below solution :
Use below "listener" snippet for the first "leads_filter_by" combo. It will handle the dynamic store binding / changing for the second combobox.
listeners:{
'select': function(combo,value,index){
var filter_to_select = Ext.getCmp('cmbLeadsFilter');
var container = filter_to_select.container;
if (index == 0){
//filter_to_select.store=leadStatusStore;
filter_to_select.bindStore(leadStatusStore);
filter_to_select.displayField='leadStatusName';
filter_to_select.valueField='leadStatusId';
} else if(index==1) {
//filter_to_select.store=leadSourceStore;
filter_to_select.bindStore(leadSourceStore);
filter_to_select.displayField='leadSourceName';
filter_to_select.valueField='leadSourceId';
}
}
}
Hope this solution will help you.
Thanks & Regards.
I had a similar problem. The second combobox would load the store and display the values, but when I would select a value, it would not actually select. I would click the list item and the combobox value would remain blank.
My research also suggested that it was not recommended to change the store and field mappings on a combobox after initialization so here was my solution:
Create a container in the view that would hold the combobox to give me a reference point to add it back later
Grab a copy of the initial config off of the combobox ( this lets me set my config declaritively in the view and not hard code it into my replace function ... in case I want to add other config properties later)
Apply new store, valueField and displayField to that config
Destroy old combobox
Create new combobox with modified config
Using my reference from step 1, add the new combobox
view:
items: [{
xtype: 'combobox',
name: 'type',
allowBlank: false,
listeners: [{change: 'onTypeCombo'}],
reference: 'typeCombo'
}, { // see controller onTypeCombo for reason this container is necessary.
xtype: 'container',
reference: 'valueComboContainer',
items: [{
xtype: 'combobox',
name: 'value',
allowBlank: false,
forceSelection: true,
reference: 'valueCombo'
}]
}, {
xtype: 'button',
text: 'X',
tooltip: 'Remove this filter',
handler: 'onDeleteButton'
}]
controller:
replaceValueComboBox: function() {
var me = this;
var typeComboSelection = me.lookupReference('typeCombo').selection;
var valueStore = Ext.getStore(typeComboSelection.get('valueStore'));
var config = me.lookupReference('valueCombo').getInitialConfig();
/* These are things that get added along the way that we may also want to purge, but no problems now:
delete config.$initParent;
delete config.childEls;
delete config.publishes;
delete config.triggers;
delete config.twoWayBindable;
*/
config.store = valueStore;
config.valueField = typeComboSelection.get('valueField');
config.displayField = typeComboSelection.get('displayField');
me.lookupReference('valueCombo').destroy();
var vc = Ext.create('Ext.form.field.ComboBox', config);
me.lookupReference('valueComboContainer').add(vc);
},