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

Properly Initialize Client Side Model

My issue is very simple. I am using ASP Web API, Entity Framework, Angular, and Kendo UI. I have 2 classes, FREQUENCY and FREQ_TYPE_. Class FREQUENCY has a navigation property to class FREQ_TYPE. I have a kendo ui grid that loads 10 class FREQUENCY models. Each class FREQUENCY model has it's FREQ_TYPE data loaded properly. My problem is that when I create a new row in my kendo ui grid and try to save the row to the server, I get an error saying the navigation property FREQ_TYPE needs to be initialized. This is expected of course since kendo doesn't know how to auto=initialize my nav properties.
What is the best practice for giving my angular JS client the knowledge it needs to create a new class FREQ_TYPE so I can properly initialize class FREQUENCY and save it to the server? My models only exist as code-first entity models, so I can't just create a new model in my client side JS as it doesn't know about these models. Is there some framework that can generate local model classes from an EF database? Or do I just have to manually set all the json fields for my class FREQ_TYPE navigation property? Or is there an easier way for me to use Web API so that I can make a request to "figure out" what the model info is and create a client side JS model without needing to have a "local model"?
Here is the client side grid and datasource:
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:29858/";
var NIICDDS = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "api/NIICDFreq",
dataType: "json"
},
update: {
url: function (data) {
console.log("DATA TEST");
console.log(data);
return crudServiceBaseUrl + "api/NIICDFreq/";
},
// url: crudServiceBaseUrl + "api/VHFMasterLists",
dataType: "json",
data: function (data) {
console.log("returning data in update TEST");
console.log(data.models[0]);
return data.models[0];
},
type: "PUT",
contentType: "application/json; charset=utf-8",
},
destroy: {
url: crudServiceBaseUrl + "api/NIICDFreq",
dataType: "json"
},
create: {
url: crudServiceBaseUrl + "api/NIICDFreq",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (model, operation) {
if (operation !== "read" && model) {
return kendo.stringify(model);
} else {
return kendo.stringify(model) ;
}
}
},
batch: true,
pageSize: 20,
schema: {
data: function (data) { //specify the array that contains the data
console.log("DATA RETURN TEST");
console.log(data);
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
Frequency: { type: "string" }
}
}
}
});
$("#NIICDFreqGrid").kendoGrid({
dataSource: NIICDDS,
columns: [
{ field: "Id", title: "Freq ID", format: "{0:c}", width: "120px" },
{ field: "Frequency", title: "Frequency Test", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline"
});
});
And here is the web api controller:
[ResponseType(typeof(FREQUENCY))]
public IHttpActionResult PostFREQUENCY(FREQUENCY testfreq)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.FREQUENCIES.Add(testfreq);
try
{
db.SaveChanges();
}
catch (DbUpdateException)
{
if (FREQUENCYExists(testfreq.Id))
{
return Conflict();
}
else
{
throw;
}
}
return CreatedAtRoute("DefaultApi", new { id = testfreq.Id }, testfreq);
}
The error is the last line:
iisexpress.exe Information: 0 : Request, Method=POST, Url=http://localhost:29858/api/NIICDFreq, Message='http://localhost:29858/api/NIICDFreq'
iisexpress.exe Information: 0 : Message='NIICDFreq', Operation=DefaultHttpControllerSelector.SelectController
iisexpress.exe Information: 0 : Message='CFETSWebAPI.Controllers.Frequency.NIICDFreqController', Operation=DefaultHttpControllerActivator.Create
iisexpress.exe Information: 0 : Message='CFETSWebAPI.Controllers.Frequency.NIICDFreqController', Operation=HttpControllerDescriptor.CreateController
iisexpress.exe Information: 0 : Message='Selected action 'PostFREQUENCY(FREQUENCY testfreq)'', Operation=ApiControllerActionSelector.SelectAction
iisexpress.exe Information: 0 : Message='Value read='DomainModelModule.FREQUENCY'', Operation=JsonMediaTypeFormatter.ReadFromStreamAsync
iisexpress.exe Information: 0 : Message='Parameter 'testfreq' bound to the value 'DomainModelModule.FREQUENCY'', Operation=FormatterParameterBinding.ExecuteBindingAsync
iisexpress.exe Information: 0 : Message='Model state is invalid.
testfreq.FREQ_POOL: The FREQ_POOL field is required.,testfreq.FREQ_TYPE: The FREQ_TYPE field is required.', Operation=HttpActionBinding.ExecuteBindingAsync
And of course testfreq has all null values.
Thank you for your help.

Since you shared no code, I can only make an assumption. However, I think you're confused with the error message. Neither Kendo or Angular are responsible. They do not "initialize" classes. You said yourself, the data is there on the client.
From what it sounds like to me, the data arrives at your controller action, and the compiler does not know how to initialize your class. Make sure your Class B has a constructor defined in your server-side code. Even an empty constructor will suffice, unless the members of the class need explicit initialization themselves.
public class B {
// constructor
public B() {
// initialize class members
}
}

ExtJS--changing proxy URL then loading store does not update grid

I have a grid with a store which is loaded when app is launched. I have a form also to which the grid is bound to. Initially, the grid shows all records. The search form allows user to filter records. The initial load and search URLs are different. When search is clicked, I dynamically change the URL configured on the store proxy to the filter URL, pass in the form values as extraParams, and load the store. I see the request is made and a response is returned. However, my grid records dont refresh.
//grid store inside initComponent
this.store = Ext.create("Ext.data.Store",{
fields:["rptid", "text", "value", "date_created", "created_by", "active],
autoLoad:true,
proxy:{
type:"ajax",
url:"./getRpts.html",
reader:{
type:"json",
root:"data"
}
}
});
//handler for search form button
this.getRPTGrid().getStore().getProxy().url = "./getFilteredReports.html";
this.getRPTGrid().getStore().getProxy().extraParams =
this.getSearchForm().getValues();
this.getRPTGrid().getStore().load();
thats it. I confirm the request is being made to load the store and confirm the response being received in debugger. The JSON response also contains the "data" root so thats not the issue and the fields dont change either. I have done this 10,000 times before but have never experienced this. Anyone have any ideas?
I even compared the Request and Response Headers from both requests and their exactly the same minus the url and params..

Try using reload to ensure your store data.
This code below check my data after add or update, so if i add record it's automatically reload my store and select the new record.
var store = this.getRPTGrid().getStore();
Ext.Ajax.request({
method: 'POST',
url: "./getFilteredReports.html",
params: {
data: this.getSearchForm().getValues()
},
success: function(response) {
store.reload({
callback: function() {
var newRecordIndex = store.findBy(
function(record, id) {
if (record.get(
'rptid'
) === values.rptid) {
return true;
}
return false;
});
getRPTGrid.getSelectionModel().select(
newRecordIndex);
}
});
}
});
and if you want to change proxy url to update your store try to update the proxy in your model instead in your store, like this below :
Ext.define('APP.model.m_gis', {
extend: 'Ext.data.Model',
alias: 'widget.gisModel',
proxy: {
type: 'jsonp',
url: './getRpts.html',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
},
fields: ["rptid", "text", "value", "date_created", "created_by",
"active"
]
});
This is the store look like :
Ext.define('APP.store.s_gis', {
extend: 'Ext.data.Store',
alias: 'widget.gisStore',
model: 'APP.model.m_gis'
});
and change your proxy like you want :
var place_store = Ext.create('APP.store.s_gis');
place_store.getProxy().setExtraParam('url', "./getFilteredReports.html");

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?