Store subclass does not work in extjs - extjs6

I have created a class like
Ext.define('abc.StoreService', {
extend: 'Ext.data.Store',
autoLoad: true,
autoSync: true,
proxy: {
type: 'memory',
reader: 'json',
data: [{
date: "2016-07-15",
arrival: 'Foo',
dep: 'abc'
}]
},
}
Ext.define('abc.mystore.Store', {
extend: 'abc.StoreService',
alias: 'Abc Store',
});
But if i use in grid like
store: 'abc.mystore.Store',
or use
store: 'Abc Store',
it does not load the store data. Is there any thing wrong i am doing?

You're not assigning a store id, or registering the store with the StoreManager.
The 'store' parameter in Ext.grid.Panel takes either a store instance (which you could make by doing Ext.create('abc.mystore.Store'), or an id of a store registered in the StoreManager.

Related

Set default selected value in extjs6 comboBox

I have made code like below
Ext.define('Abc.store.Indicator', {
extend: 'Ext.data.Store',
alias: 'store.indicator',
fields: ['key', 'value'],
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: [
["ALL", "ALL"],
["Y", "Y"],
["N", "N"]
]
});
Ext.define('Abc.view.main.Indicator', {
extend: 'Ext.form.field.ComboBox',
xtype: 'indicator',
fieldLabel: 'Ind',
name: 'indicator',
displayField: 'value',
valueField: 'key',
store: {
type: 'indicator'
}
});
and in report items i use like
items: [{xtype:'indicator'}]
When user opens the report, i want 'N' to be displayed as default value. How do i do this. I set 'value' key, but when dropdown is opened, selected value is different.
Maybe you can put queryMode: 'local' in the config of 'Abc.view.main.Indicator', or the store will load.
Here is the key code classic/classic/src/form/field/ComboBox.js line 1562
if (lastSelected && selectionModel.selected.length && store.indexOf(lastSelected) > -1) {
itemNode = lastSelected;
}
So the new Store doesn't has the lastSelected which you set.

youtube api v3 CORS support in sencha touch 2

Using Sencha Touch, How do we query youtube v3 search api?
Below is the sample url which works fine when issued from a browser directly (NOTE: Key is required) :
"https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&type=video&channelId=UC3djj8jS0370cu_ghKs_Ong&key=MY_KEY"
However the same url fails when loaded using sencha touch Store ajax proxy.
It seems that OPTIONS call is made against this URL and GET was aborted.
What is needed in Sencha touch store for working with youtube V3 google apis? I did not find jsonp support for youtube V3 api.
I have used this api like this,
proxy: {
type: 'ajax',
url: 'https://www.googleapis.com/youtube/v3/search',
useDefaultXhrHeader: false,
extraParams: {
part: 'snippet',
q: 'ambarsariya',
regionCode: 'IN',
maxResults: 30,
key: 'your_key'
},
reader: {
type: 'json',
rootProperty: 'items'
}
}
One more thing you have to do and thats is you have set a idProperty in the model of this store. Inside config of the model used I have used
idProperty: 'videoId',// its better if this name is not same as any fields name
fields: [{
name: 'snippet'
}, {
name: 'thumbnail',
mapping: 'snippet.thumbnails.default.url'
}, {
name: 'title',
mapping: 'snippet.title'
}]
Hope this solves your problem.
It works well for me.
STORE:-
Ext.define('MyApp.store.videos', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Video',
config: {
autoLoad: true,
proxy: {
type: 'ajax',
//This is required to enable cross-domain request
useDefaultXhrHeader: false,
url: 'https://www.googleapis.com/youtube/v3/search',
extraParams: {
part: 'snippet',
q: "Enrique", //Query string
regionCode: 'IN',
maxResults: 30,
key: 'AIzaSyD6FvoLaIFqyQGoEY4oV7TEWGAJSlDd1-8'
}
}
}
});
This is the model used by the above store.
MyApp.model.Video:-
Ext.define('MyApp.model.Video', {
extend: 'Ext.data.Model',
requires: [],
config: {
idProperty: 'videoId',
fields: [{
name: 'id'
}, {
name: 'videoId',
mapping: 'id.videoId'
}]
}
});
It also works well for jsonp proxy also,
just change type: jsonp inside proxy and remove useDefaultXhrHeader config.

ExtJs 5 grid store/viewmodel binding: Cannot modify ext-empty-store

I'm pulling my hair out on this one...
I have a view with some grids, a store and a viewModel. I need different filtered versions of the store in different grids, so I'm trying to bind each filtered store to a grid. Now I can't even get a store to load in a grid in the first place...
Here's what my code looks like:
Store:
Ext.define('My.store.Admin.Kinder', {
extend: 'Ext.data.Store',
model: 'My.model.Kind',
storeId: 'adminKinderStore',
alias: 'store.adminKinder',
proxy: {
type: 'ajax',
method: 'post',
url: '/getKinder',
reader: {
type: 'json',
rootProperty: 'kinder'
}
}
});
ViewModel:
Ext.define('My.model.kindViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.kindViewModel',
requires: [
'My.model.Kind',
'My.store.Admin.Kinder'
],
view: 'kindView',
stores: {
warteliste: {
type: 'adminKinder'
}
}
});
View:
Ext.define('My.view.Admin.kinder', {
extend: 'Ext.panel.Panel',
alias: 'widget.kindView',
id: 'kinder-panel',
requires: [
'My.view.Admin.kindController',
'My.model.kindViewModel'
],
controller: 'kind',
border: false,
maxWidth: 960,
session: My.session,
viewModel: {
type: 'kindViewModel'
},
initComponent: function() {
this.activeTab = 'warteliste-tab';
this.callParent();
},
items: [
{
xtype: 'grid',
id: 'warteliste-grid',
bind: {
store: '{warteliste}'
},
border: false,
margin: '0 0 20px 0',
selModel: {
allowDeselect: true
},
columns: [
// some grid columns
],
listeners: {
afterRender: function(grid) {
grid.store.load();
}
}
}]
});
I get an error message "Cannot modify ext-empty-store", which must mean that the store is not (yet) bound when store.load() is called in the afterRender listener.
Strange thing is, when I console.log the grid, the store is there. When I console.log grid.store, an empty store is returned.
I got the same issue in afterRender event and solved it by not getting the store from the grid like
grid.store.load();
but from the ViewModel (ViewController scope):
this.getViewModel().getStore('{warteliste}').load();
Check if the store is created as expected in viewmodel. Normally, we do not have store definition files in ./store directory but we place their configurations in viewmodel.
See an example of that here: http://extjs.eu/ext-examples/#bind-grid-form - MainModel::stores
The solution to your original problem
I need different filtered versions of the store in different grids
are chained stores.
See an example of how to implement them here: http://extjs.eu/on-chained-stores/
for me it was
myGrid.getViewModel().getStore('myStoreName').load();

extjs 4.2 POST data id=0 generates method not allowed - laravel 4

When I send data ( store in codeblock ) to my laravel 4 server I get "method not allowed" and the server returns all methods allowed except POST. When I comment out 'id' in my model, everything works. ( don't want to comment out id)
I tried the writeRecordId:false and writeAllFields:false in my writer property but this doesn't remove the id while sending..
Ext.define('Equipment.store.Equipments', {
extend: 'Ext.data.Store',
model: 'Equipment.model.Equipment',
requires: ['Ext.data.proxy.Rest'],
alias: 'store.Equipments',
proxy: {
type: 'rest',
url: '/json/stock/equipment',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json'
}
},
groupField: 'location'
});
data send:
{"id":0, "location":"Building123","locationDetails":"office 2","locationIndex":"drawre 5", "description":"item 7"}
I guess I've sorta solved it I think:
Ext.define('Equipment.model.Equipment', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id',
type: 'number',
useNull: true
},
Placing 'useNull: true' along id sets {"id":null, ... in the data which is accepted by the server. Anyone care to comment?

ExtJs 4 POST array of records from store

I have a simple rest store and after filling it with several records I am trying to send post request to server with array of records by calling create function.
The POST request is sent but only with one record instead of array of records.
UPDATE - I forgot to mention that this record has fields with empty values, and that is strange too, because I am filling store with values.
I stalled. Please give me a light where did I go wrong. Thanks.
My code samples:
Ext.define('my.store.testStore',{
extend: 'Ext.data.Store',
storeId: 'teststore',
model: 'my.model.testModel',
proxy: {
type: 'rest',
url: 'http://someurl.ru',
reader: 'json'
}
});
Ext.define('my.model.testModel',{
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'email', type: 'string'}
]
});
var namesList = [Ext.create('my.model.testModel',{
'name':'test name1',
'phone':'343-343',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'6345',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'24324',
'email':'test#test.com'
})
];
var testStore = Ext.create('my.store.testStore');
testStore.loadData(namesList);
testStore.create();
You should use testStore.sync() insted of testStore.create()
Another things:
testStore.create() - this function takes an object as first parameter and creates instance of the model then sends it to the server.
In case if "create" is called without parameter then instance of the model is created based on values from fields defaultValue which by default is set to "", that is way you got response with empty values.
About namesList. You forgot to add ")" to the 3-th model.
var namesList = [Ext.create('my.model.testModel',{
'name':'test name1',
'phone':'343-343',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'6345',
'email':'test#test.com'
}),
Ext.create('my.model.testModel',{
'name':'test name2',
'phone':'24324',
'email':'test#test.com'
})//Here was missed ")"
];
After a great time, this issue appeared again so I had to solve it anyway.
And finally I succeeded to find working solution. The point is was just to add batchActions: true to store. Like this:
Ext.define('my.store.testStore',{
extend: 'Ext.data.Store',
storeId: 'teststore',
model: 'my.model.testModel',
proxy: {
type: 'rest',
url: 'http://someurl.ru',
reader: 'json',
batchActions: true
}

Resources