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
Related
I have a grid and its store configured with Ext.ux.data.PagingMemoryProxy, like this:
Ext.create('Ext.data.Store', {
data: myData,
fields: storeFields,
proxy: {
type: 'pagingmemory',
reader: {
type: 'array',
getData: function(rawData) {
...
},
}
},
remoteFilter: true,
remoteSort: true
});
When I want to filter store locally I use either filter() or filterBy().
When I use filter() full set of data is filtered (passed via data: myData), but when I use filterBy() its only affect first page.
Is it possible to apply a filterBy() to the entire data set in similar way with filter() when pagingmemory proxy is used?
I understand that pagingmemory proxy use two stores to save the entire data and data to be used in grid store, and I understand that it is possible to rewrite filterBy() work, but perhaps there is some simple solution?
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 have a grid with some columns with filters.
columns defination:
columns:[{
text: "Number",
dataIndex: 'clientreference',
width: 200,
filter: true,
sortable: true
},
here is filter feature defination
features: [{
ftype: 'filters',
encode: true,
local: false
}],
The problem is: When i'm trying to save state of grid, filters are not working: When I adding this code to a grid:
stateful: true,
stateId: 'documentsGrid',
I refresh the page and all works fine, because i dont have state in my cookies.
But when I refresh the page second time - state loads from cookies and filters are not working.
If i remove stateful: true and refresh page, filters are working fine.
Any suggestions?
Also I noticed, that all examples in extjs site are only with filters or with stateful grid, but there is no one example with both.
UPDATED:
The most useful way was making my own method for saving state of elements I need and to restore it.
I think you are specifying features in grid.But you can specify filters in store directly.So try to define filters in store and stateful in grid config options.Hope you may get the solution to come out from this.
Is there a working example available of an ext js ListFilter where the list options are loaded by a remote store. The documentation gives examples of harcoded options like 'Small', 'Medium' and 'large'.
I wish to load these options from a remote store. I found one example here but this modifes the core class ListFilter.js I am looking to avoid that.
http://www.sencha.com/forum/showthread.php?64234-Ext.ux.grid.filter.ListFilter-gt-loaded-store
Thanks,
Kaushik
Here is an example for a filter. The following code snippet would be used in the instantiation block for your filter plugin.
filters: [{
type: 'list',
dataIndex: 'dataInTheStoreName', // use this as the value
single: false, // true for radio buttons
labelField: 'dataInTheStoreLabel', // use this as the label
store: new yourExampleStore()
}.{...your other filters...}]
So just make an ExtJs store object to access your data, and attach it to the list filter.
There are many example of this such as here.
I've created a working fiddle that could be useful for you:
https://fiddle.sencha.com/#view/editor&fiddle/2gp6
Basically you declare the filter with a store (list filter needs boths: lavel and id)
text: 'Eye Color',
dataIndex: 'eyeColor',
filter: {
type: 'list',
store: filterStore,
idField: 'id',
labelField: 'value'
}
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.