Develop Reference

Is it possible to get a combox reference from a store? ExtJS 6

Following scenario:
{
xtype: 'combo',
displayField: 'LANGTEXT',
valueField: 'KURZTEXT',
store: {
remoteSort: false,
autoLoad: false,
pageSize: 999999,
fields: [
{ name: 'KURZTEXT', type: 'string' },
{ name: 'LANGTEXT', type: 'string' }
],
proxy: {
type: 'ajax',
url: 'callHandler.cfc',
actionMethods: { read: 'POST' },
reader: {
type: 'json',
rootProperty: 'DATA.ROWS',
totalProperty: 'TOTALCOUNT'
}
},
listeners: {
load: function(store, records, successful, operation, eOpts ){
//is something like this possible?
var combo = store.getCombo()
}
}
}
}
Is it possible to get the combobox reference from the store with something like this: store.getCombo()? I know that normally you can only get the store reference from the combobox. But I thought maybe it works also the other way around, if the store is created in the combobox?

You may want to check the combobox afterQuery template method.
It's a configuration available for the combobox component that works almost similar to the store's load event. Here you have access to both the combobox component and the store.
I think the drawback is: it only gets called when the combo trigger is clicked or a value is typed in the combo's textfield. I believe this would already be help if you want to do your post-processing after these events.
{
xtype: 'combo',
displayField: 'LANGTEXT',
valueField: 'KURZTEXT',
store: {
remoteSort: false,
autoLoad: false,
pageSize: 999999,
fields: [
{ name: 'KURZTEXT', type: 'string' },
{ name: 'LANGTEXT', type: 'string' }
],
proxy: {
type: 'ajax',
url: 'callHandler.cfc',
actionMethods: { read: 'POST' },
reader: {
type: 'json',
rootProperty: 'DATA.ROWS',
totalProperty: 'TOTALCOUNT'
}
}
},
afterQuery: function (queryPlan) {
var combo = queryPlan.combo; // I guess `var combo = this;` should work too..
var store = combo.getStore();
// always return queryPlan
return queryPlan;
}
}
Let me know if you have any issue or questions.

The only solution I could think of was to write a custom matcher function.
You could do this by overriding the Ext.Component and adding the matcher function like this:
Ext.override(Ext.Component, {
hasStoreId: function (storeId) {
if (Ext.isFunction(this.getStore) && this.getStore().storeId) {
return this.getStore().storeId === storeId;
}
return false;
}
});
Now that you have a matcher function for every component you can search for all components with given storeId like this:
Ext.ComponentQuery.query("{hasStoreId('mystore')}");
You can also be more precise and only search for combos that match the criteria like this:
Ext.ComponentQuery.query("combo{hasStoreId('mystore')}");
Now that you have all combos with the given storeId you should easily be able to retrieve the combo you need.
Here a Sencha fiddle with a working example:
example code

While Dynamically loading Treestore using Ajax proxy child nodes arent appearing

I want load a Treestore using ajax proxy.But it shows only root node in user interface.
Json coming from server as response looks correct and no error in console.
I want to load the root node also from server side response but though json appears correct it doesnt appear in the user interface.
{"result":{"text":"ABC","leaf":false,"expanded":true,"children":[{"text":"Dashboard","leaf":false,"expanded":false},{"text":"Report","leaf":false,"expanded":false},{"text":"Chart","leaf":false,"expanded":false}]}}
var model=Ext.define('TreeModel',{
extend:'Ext.data.Model',
fields:[{
name:'text',
type:'string'
},
{
name:'leaf',
type:'boolean'
},
{
name:'expanded',
type:'boolean'
}],
proxy: {
type: 'ajax',
url: 'FetchTreeChidren',
reader: {
type: 'json',
root: 'result'
}
}
});
var store = Ext.create('Ext.data.TreeStore', {
model:model
});
Ext.Ajax.request({
url: 'FetchTreeChidren',
params: {
level:'level1'
},
async:false,
success: function(response){
var treejson = Ext.JSON.decode(response.responseText);
store.setRootNode(treejson);
}
});
var lefttree=Ext.create('Ext.tree.Panel', {
region:'west',
height:screen.height-150,
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
return lefttree;
please help me out.
Thanks & Regards

Try to use
var store = Ext.create('Ext.data.TreeStore', {
model:model
proxy: {
type: 'memory'
},
root: {
expanded: false,
children: childreanArr
}
});
and change
store.reconfigure(treejson);
inside the success. This work for me

how to use script variable in kendo datasource

i have a one dropdown and one tree view drag and drop.
#Html.DropDownListFor(model => model.xyz, Model.xyzlist, new { id = "dropdownid" })
now i want to call controller action method on dropdown change event in jquery.
<script>
var id = 0;
$('#dropdownid').change(function(){
id= $('#dropdownid').val();
});
how to use id variable in URL of read :{ } perameter
datasource= new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "#Html.Raw(Url.Action("actionmethod", "controllername", new { #ID= id }))",
type: "POST",
dataType: "json"
}
},
schema: {
model: {
id: "id",
hasChildren: "hasChildren",
//expanded: true
}
}
});
$(document).ready( function(){
$("#CountryZone-treeview").kendoTreeView({
loadOnDemand: false,
dataSource: datasource,
dataTextField: "Name",
dragAndDrop: true,..................etc
</script>
please help me.

You can send additional data with the transport.read.data object (see Kendo documentation here). Your datasource might look like this:
datasource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "#Html.Raw(Url.Action("actionmethod", "controllername", new { #ID= id }))",
type: "POST",
dataType: "json"
data: { data: $('#dropdownid').val() }
}
},
schema: {
model: {
id: "id",
hasChildren: "hasChildren",
//expanded: true
}
}
});
You could also provide a function name to data (for example getDropDownId()), rather than $('#dropdownid').val() to provide more robust code (null checks, etc).

ExtJS: store.load() doesn't load data

I'm faced with problem in ExtJS 4.2, that store.load() method doesn't load data from server, only retrieve json.
My js/itfx/resources/genres.json file:
[{"name":"Action & Adventure","code":"ACTION-ADVENTURE-00"},{"name":"African","code":"AFRICAN-00"},{"name":"Anime","code":"ANIME-00"},{"name":"Bollywood","code":"BOLLYWOOD-00"},{"name":"Classics","code":"CLASSICS-00"},{"name":"Comedy","code":"COMEDY-00"},{"name":"Concert Films","code":"CONCERT-FILMS-00"},{"name":"Documentary","code":"DOCUMENTARY-00"},{"name":"Drama","code":"DRAMA-00"},{"name":"Foreign","code":"FOREIGN-00"},{"name":"Holiday","code":"HOLIDAY-00"},{"name":"Horror","code":"HORROR-00"},{"name":"Independent","code":"INDEPENDENT-00"},{"name":"Kids & Family","code":"KIDS-FAMILY-00"},{"name":"Made for TV","code":"MADE-FOR-TV-00"},{"name":"Middle Eastern","code":"MIDDLE-EASTERN-00"},{"name":"Music Documentaries","code":"MUSIC-DOCUMENTARIES-00"},{"name":"Music Feature Film","code":"MUSIC-FEATURE-FILMS-00"},{"name":"Musicals","code":"MUSICALS-00"},{"name":"Regional Indian","code":"REGIONAL-INDIAN-00"},{"name":"Romance","code":"ROMANCE-00"},{"name":"Russian","code":"RUSSIAN-00"},{"name":"Sci-Fi & Fantasy","code":"SCIFI-FANTASY-00"},{"name":"Short Films","code":"SHORT-FILMS-00"},{"name":"Special Interest","code":"SPECIAL-INTEREST-00"},{"name":"Sports","code":"SPORTS-00"},{"name":"Thriller","code":"THRILLER-00"},{"name":"Turkish","code":"TURKISH-00"},{"name":"Urban","code":"URBAN-00"},{"name":"Western","code":"WESTERN-00"}]
My model:
Ext.define('ITFX.model.films.info.FilmGenre', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'code', type: 'string'}
]
});
My store:
Ext.define('ITFX.store.films.info.FilmGenre', {
extend: 'Ext.data.Store',
model: 'ITFX.model.films.info.FilmGenre',
proxy: {
type: 'ajax',
url : 'js/itfx/resources/genres.json',
reader: {
type: 'json'
}
}
});
So, after execute code abowe:
var allFilmGenresStore = Ext.create('ITFX.store.films.info.FilmGenre');
allFilmGenresStore.load();
Methods
allFilmGenresStore.getCount(); //0
allFilmGenresStore.getTotalCount(); //0
will return, that store have nothing loaded
What I'm doing wrong?
Thanks in advance

Yes, thanks for assist, the rout cause was, that store data loaded asynchronously. Code for load data, should be:
allFilmGenresStore.load({
callback : function(records, options, success) {
// some custom logik
}
});

You have to change reader
reader: {
type: 'json',
root: 'root'
}
and to send json_encode('root' => $data);
I hope it will help you

Sencha Touch: ScriptTagProxy url for create/update functionality

I've a ScriptTagProxy and I'm able to receive the data, but now I wanted to update a record. I've specified an url but only one url. Do I have to handle all the actions (read, update, create, delete) with this url?
If yes: how does the action is applied to the url?
If not: how I can specify more urls?
Here is the code I have so far:
app.stores.entries = new Ext.data.Store({
model: "app.models.Entry",
storeId: 'app.stores.entries',
proxy: {
type: 'scripttag',
url: 'http://myurl.de/getEntries.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password
},
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
});
I've read in the docs that you can pass an config object to the save function of a model to configurate the proxy.
So I tried following:
entry.save({
url: 'http://mysite.com/updateEntry.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password,
entry: entry
},}
As you see there is a url specified.
But I still get the error:
Uncaught Error: You are using a ServerProxy but have not supplied it with a url.
);
Same behaviour when using AjaxProxy or RestProxy for example :(

Hering,
With your first block of code you ask:
Question 1) "Do I have to handle all the actions (read, update, create, delete) with this url?"
The answer is yes.
Question 2) "If yes: how does the action is applied to the url?"
According to the Sencha source code you need to define the actionMethods like so:
myApp.stores.Things = new Ext.data.Store({
model: "Things", proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
url: 'jsontest.json',
reader: {
type: 'json',
root: 'things'
}
},
autoLoad: true
});
If you delete, create or edit a record you must call:
store.sync();
There is also a "autoSave" property but it only syncs on edits, not removes.
This will send over the things that have changed or been deleted as part of the request payload, it is your responsibility to parse the json and handle it.

Hering,
I was reading the documentation here, I found this example in the Model class:
Ext.regModel('User', {
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
But above you don't show your Model for app.models.Entry, have you tried that?