ExtJS 4 remove item from store - javascript

I want to delete the first item of the store:
My store code:
Ext.define('Test.store.filtros.strEstadosMtoOrganismos', {
extend: 'Ext.data.Store',
model: 'Test.model.filtros.mdlEstadosMtoOrganismos',
autoLoad: false,
proxy: {
type: 'ajax',
api: {read: 'some url'},
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
}
}
});
My combo code:
xtype: 'combo',
id: 'tfecomboEstados',
fieldLabel :'Estado',
queryMode: 'local',
editable: false,
displayField: 'label',
valueField: 'value',
store: 'filtros.strEstadosMtoOrganismos',
anchor: '95%'
Code of my controller:
init:function(){
this.control({
'viewFichaMtoOrganismos #tfecomboEstados':{
beforerender:this.onCargarEstadoFicha
});
},
onCargarEstadoFicha:function(){
Ext.getCmp('tfecomboEstados').getStore().removeAt(0);
}
I want to delete the first item of the store.I use the store for two combos,in one I want all the records,but in the second one I want all but the first.
And removeAt(0) is not working.

You cannot just remove record from store to affect one combo and do not another. you need different stores for your combos.
also use parameter in your listener function instead of getting it by getCmp function
onCargarEstadoFicha:function(combo){
combo.getStore().removeAt(0);
}

Related

extjs store proxy not invoking for xtype

I have a popup window that has some xtypes, one xtype is a grid and that has a Store but i dont see it invoking any ajax call. Can someone tell me what am i missing?
Ext.define('myApp.view.myPopup' {...
....
{
xtype: 'grid',
store: 'MyStore',
iconCls: 'x-fa fa-users',
height : 450,
columns: [{
header...
...}
Store
Ext.define('myApp.store.MyStore', {
extend: 'Ext.data.Store',
model: 'myApp.model.modelA',
pageSize: 100,
remoteSort: true,
autoload : true,
proxy: {
type: 'ajax',
url : 'getStatusId',
reader: {
type: 'json',
root: 'rows',
successproperty: 'status',
totalProperty: 'records'
}
},
listeners : {
beforeload : function(store, operation, eOpts) {
...
store.getProxy().extraParams = submitParams;
}
}
});
You have a typo: autoload -> autoLoad.
Your code also doesn't show an instance of the store being created. store: 'MyStore' requires an existing store instance with a storeId: 'MyStore'.
You probably want something more like:
Ext.define('myApp.view.myPopup' {...
....
{
xtype: 'grid',
store: { type: 'myStore' },
iconCls: 'x-fa fa-users',
height : 450,
columns: [{
header...
...}
Ext.define('myApp.store.MyStore', {
extend: 'Ext.data.Store',
alias: 'store.myStore',
model: 'myApp.model.modelA',
// ....
});
Create an instance of store and point to it.
var store = Ext.create('myApp.store.MyStore' {
autoLoad : true,
});
..........
{ xtype: 'grid',
store: store,
iconCls: 'x-fa fa-users',
height : 450,
}
Like #evan-trimboli states out you have to either use an excisting store instance or you can use a config. The config will then lead to a new store instance created for you internal.
To use a config to create a store instance on the fly, you need to provide an alias on the store class e.g. alias: "store.mystore".
Now you can reference to it in the store config of the grid class like store: { type: 'myStore' }.
Bring it all together below and see also a running fiddle.
Ext.define('myApp.store.MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore', // the alias we need for the store config of the grid
// ...
});
Ext.define('myApp.view.myPopup', {
extend: 'Ext.grid.Panel',
store: {
type: 'mystore' // references the store by it's alias
},
// ...
};

Chained Comboboxes Extjs getfilter error

View:
{
xtype: 'combo',
anchor: '100%',
reference: 'il',
fieldLabel: 'İl',
name: 'il',
forceSelection: true,
typeAhead: true,
displayField: 'il',
store: 'il',
cls :'text-font',
baseCls :'fieldcolor',
valueField: 'il'
},
{
xtype: 'combobox',
anchor: '100%',
reference: 'ilce',
fieldLabel: 'İlce',
name: 'ilce',
forceSelection: true,
typeAhead: true,
displayField: 'ilce',
store: 'ilce',
filters: {
property: 'il',
value: 'ilid'
},
cls :'text-font',
baseCls :'fieldcolor',
valueField: 'ilce'
},
Model:
Ext.define('ertg.model.ilmodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'il'
},
{
name: 'ilid'
}
]
});
Another model:
Ext.define('ertg.model.ilcemodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'ilce'
},
{
name: 'ilid'
}
]
});
Hi guys,This my comboboxes is run error .error this:Uncaught TypeError: me.store.getFilters is not a function
at constructor.onEndUpdateFilters
Whats Problem ??
Thanks
Ertugrul
xtype combobox simply has no filters {} config. in order to filter the entries of a combobox, one has to configure an event listener, which then calls store.filter(), while passing on the property & value to filter for... just see the API docs: it's config filters vs. method filter ...while both of them belong to the store - and not the combobox. the docs for Ext.util.Filter are also relevant.
based upon the provided code below, I'd suggest to write it alike this (the requires should already be loaded by the store class, would omit them, too... only know that I never require any them):
Ext.define('ertg.store.ilce', {
extend: 'Ext.data.Store',
requires: ['ertg.model.ilcemodel'],
model: 'ertg.model.ilcemodel',
storeId: 'ilce',
filters: null,
proxy: {
type: 'ajax',
url: 'resources/data/ilce.json',
reader: {type: 'json'},
writer: {type: 'json'}
}
});

Filtering a combox in ExtJs

I have an ExtJs combobox. Its store loaded using JSON (using my store). I want to load all the values to the store, and then filter them with the text entered in the combo's textfield.
I don't want my combo to reload its store every time I type something. How can I do that?
And other thing that then I try to select element from combobox first time it's reload data from server.
PS: listener in my store for select first element of data from server.
Thanks.
Here's my store class :
Ext.define('KP.store.account.street', {
extend: 'Ext.data.Store',
model: 'KP.model.account.combo',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: '/account/combostreetdata'
},
reader: {
type: 'json',
root: 'combolist',
successProperty: 'success',
totalProperty: 'total'
}
},
listeners: {
'load': function (street_list) {
var street_combo = Ext.getCmp('street');
street_combo.select(street_list.getAt(0));
}
}
});
My view:
{
id: 'street',
xtype: 'combobox',
width: 700,
name: 'street',
editable: true,
mode: 'local',
typeAhead: true,
emptyText: '?????',
fieldLabel: '???',
labelWidth: 120,
size: 72,
x: 20,
y: 180,
displayField: 'string_value',
valueField: 'long_key',
store: street_list
},
You have a ComboBox config error.
Not mode: 'local', but queryMode: 'local',.
I use such a fields in my combos:
queryMode: 'local',
forceSelection: true,
Typeahead works fine, no data loads during typeahead.

Ext 4 RowEditor editing cancels when first time click on ComboBox in currently edited row

I have an Ext.grid.Panel with RowEditor plugin, and it contains a column with a combobox editor:
{
dataIndex: 'parentId',
text: 'Parent category',
editor: {
store: store,
valueField: 'categoryId',
displayField: 'name',
xtype: 'combobox',
allowBlank: true
}
The store looks like this:
var store = Ext.create('Ext.data.Store', {
model: 'Category',
autoLoad: true,
proxy: {
type: 'rest',
url: 'api/categories',
reader: {
type: 'json',
root: 'categories'
}
}
});
And model:
Ext.define('Neopod.model.Category', {
extend: 'Ext.data.Model',
fields: ['categoryId', 'name', 'parentId'],
})
When editing a grid row and clicking on combobox for the first time, then ExtJS triggers data load from the server and the roweditor cancels automatically. So user expected to see combo dropdown, but combo not opened and instead the edit mode cancels.
So why does ExtJS behave this way ?
A simple handling is to configure your combobox with: queryMode: 'local' so that it doesn't try to reload whenever it is expanded.
Using your example:
{
dataIndex: 'parentId',
text: 'Parent category',
editor: {
store: store,
valueField: 'categoryId',
displayField: 'name',
xtype: 'combobox',
allowBlank: true,
queryMode: 'local'
}
}
You can also try configuring your RowEditing plugin with autoCancel: false e.g.:
Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'rowediting',
clicksToEdit: 2,
autoCancel: false
});

ExtJs Combobox problem

Hi i have a formpanel with remote combobox, the store is jsonstore and is get from webservices with paging results, everything is well, but when you pick an option form the combo always pick the first one, you can pick the third but the combo choose the first option i don't know the reason for this the configuration for the combo is this:
{
xtype: 'combo',
fieldLabel: 'Sitio Interés',
anchor: '100%',
triggerAction: 'all',
store: dsPuntos,
mode: 'remote',
displayField: "Nombre",
valueField: "Id",
typeAhead: false,
width: 222,
hideLabel: true,
allowBlank: false,
id: 'cboDato',
editable: true,
pageSize: 20,
minChars: 0,
hideTrigger: true,
//enableKeyEvents: true,
emptyText: 'Escriba un sitio de interés',
tpl: '<tpl for="."><div class="x-combo-list-item">{Nombre} - {Municipio}</div></tpl>',
listeners: {
scope: this,
specialkey: function (f, e) {
if (e.getKey() == e.ENTER) {
Ext.getCmp('btnConsultar').handler.call(Ext.getCmp('btnConsultar').scope);
}
}
}
},
and the store is here:
var dsPuntos = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'Services/MapService.svc/GetSitiosInteres',
method: 'GET'
}),
root: 'd.rows',
totalProperty: 'd.total',
id: 'Id',
fields: ['Nombre', 'Municipio', 'Id']
});
Thanks
Your store config is a little off. It should be idProperty instead of id. Also check the json coming from the server. Make sure that the id are unique.

Categories