i made an app in architect. My store is this
Ext.define('MyApp.store.storeMain', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.modelMain'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'storeMain',
model: 'MyApp.model.modelMain',
pageSize: 50,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'Main',
totalProperty: 'Main.totalCount'
}
}
}, cfg)]);
}});
This is my button:
{
xtype: 'button',
text: 'Submit',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
and this is the function
onButtonClick: function(button, e, options) {
storeMain.load({
url:'test.json'
})
}
},
But it is not loading the store. Instead it is giving this error: storeMain is not defined. I have a viewport.js and other files like the storeMain.js
There is no variable storeMain anywhere. You need to call Ext.getStore('storeMain') to get store reference.
Related
I have an ExtJS 6.5.1 app and I am just now starting to migrate our app from MVC to MVVM, so I am pretty clueless about VM and VC.
I have a viewModel with an inline store like so:
Ext.define("MYAPP.view.ViewportViewModel",{
extend:"Ext.app.ViewModel",
alias: 'viewmodel.viewport',
constructor: function(config) {
var me = this;
this.callParent(arguments);
me.setStores({
info: {
autoLoad:true,
fields:["TEST"],
proxy:{
type:"ajax",
url:"blah.html",
reader:{
type:"json"
}
}
}
});
}
});
From inside my controller, how can I "get" the store so I can change the URL, reload, pass extraParams etc?
Thanks
You can get your store using this.getViewModel().getStore('info') inside of ViewController.
After getting store you can set another url using store.getProxy().setUrl(), load using store.load() and for sending extra params store.getProxy().extraParams.
Here is example
//this one way
store.load({
url: '{your url here}',
params: {
userid: 22216
}
});
//this another way
store.getProxy().setUrl('{your url here}');
store.getProxy().extraParams = {
userid: 22216
};
store.load();
In this FIDDLE, I have created a demo using view model and view controller. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onRefreshButtonTap: function () {
var info = this.getViewModel().getStore('info');
info.getProxy().setUrl('data2.json');
info.load();
}
});
Ext.define("ViewportViewModel", {
extend: "Ext.app.ViewModel",
alias: 'viewmodel.myvm',
constructor: function (config) {
var me = this;
this.callParent(arguments);
me.setStores({
info: {
autoLoad: true,
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: ''
}
}
}
});
}
});
//creating panel with GRID and FORM
Ext.create({
xtype: 'panel',
controller: 'myview',
title: 'Binding Example',
renderTo: Ext.getBody(),
viewModel: {
type: 'myvm'
},
layout: 'vbox',
items: [{
xtype: 'grid',
flex: 1,
width: '100%',
bind: '{info}',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
itemclick: 'onGridItemClick'
}
}],
tbar:[{
text:'Refresh',
handler:'onRefreshButtonTap'
}]
});
}
});
I try to create a combobox(with autoCompleted) and a remote store.When a user types some letters in the combobox,it goes to the server to take a new Datastore.
And I get nothing in my combobox.What's wrong with my code?How can I do for this?
Here's my combobox:
Ext.define('HDDTest.view.mod.searchDetails', {
extend: 'Ext.Panel',
controller: 'home',
items: [
{
xtype: 'combobox',
width: 450,
id: 'createRelatedConceptComboBox',
name: 'createRelatedConceptComboBox',
fieldLabel: 'Test',
//hideTrigger:true,
valueField: 'text',
emptyText: 'Select Concept',
typeAhead: true,
typeAheadDelay: 350,
minChars: 1,
listeners: {
change: 'onRelatedConceptComboBoxClicked'
},
store: {
type: 'GetRelatedConceptStore'
}
}
]
});
Here's my controller:
Ext.define('HDDTest.controller.main.HomeController', {
extend: 'Ext.app.ViewController',
alias: 'controller.home',
onRelatedConceptComboBoxClicked: function (constructors, text) {
var getRelatedConceptStore = Ext.create('HDDTest.store.GetRelatedConceptStore');
getRelatedConceptStore.load({
params: {
sValue: 'text'
},
callback: function (records, success) {
},
scope: this
});
}
});
Here's my store:
Ext.define('HDDTest.store.GetRelatedConceptStore', {
extend: 'Ext.data.Store',
field: ['value', 'text'],
alias: 'store.GetRelatedConceptStore',
storeId: 'GetRelatedConceptStore',
autoSync: true,
autoLoad: true,
proxy: {
type: 'ajax',
url: "http://127.0.0.1/api/TSGH/GetAllSearchResults",
method: 'GET',
reader: {
type: 'json',
rootProperty: '',
transform: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
data[i] = new Array();
data[i][0] = records[i].NCID;
data[i][1] = records[i].DEFAULT_NAME + '(' + records[i].NCID + ')';
}
console.log(data);
return data;
}
}
}
});
When I type some letters in my combobox I get nothing and without any error messages in my console window. How can I do for this?
Thanks in advance, Ben
There seems to be some error in the processing of transform() method or the Model field name for the displayField property.
Here is the working code with transform() method commented out.
Model
Ext.define('MyDesktop.model.mail.MailFoldersModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.String'
],
fields: [
{
type: 'string',
name: 'id'
},
{
type: 'string',
name: 'idParent'
},
{
type: 'string',
name: 'text'
}
]
});
My TreeStore
Ext.define('MyDesktop.store.mail.MailFoldersStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyDesktop.model.mail.MailFoldersModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MailFoldersStore',
model: 'MyDesktop.model.mail.MailFoldersModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://url/mail/folders',
reader: {
type: 'json',
rootProperty: 'items',
successProperty: 'success'
}
},
root: {
text: 'root',
iconCls: 'mail-folders-owner'
}
}, cfg)]);
}
});
Store is autoloaded, all works correctly, store contains 11 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
If I set autoLoad to false and trying to load by manually - store is empty, 0 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
MailFoldersStore.load({
callback : function(records, operation, success) {
console.log(records);
}
});
What can be a reason for this behaviour?
I also has same problem. I am using Extjs 5.1. After googling I found one complex solution which needs us to modify the framework.
See the below link if it can help you.
http://www.sencha.com/forum/showthread.php?154823-listeners-quot-exception-quot-in-proxy.ajax-on-TreeStore-do-not-work
I should load date from server dynamically,
however, I have no idea how to change get parameters.
Here is my code.
I want to load store when the view is loaded, but the store get data from server
when the app is loaded. I need to change param according to user's input data.
[Store]
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel',
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
// extraParams: {
// man: '',
// },
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
},
});
[VIEW]
Ext.define('APP.view.MyListView', {
extend: 'Ext.navigation.View',
xtype: 'applistview',
requires: [
'Ext.Panel',
'APP.view.TopMenu',
'APP.view.TestListView',
'APP.config.Runtime',
],
fullscreen: true,
config: {
navigationBar: false,
fullscreen: true,
items: [
{ // Top Menu
xtype: 'topmenu',
},
{ // Main Menu
xtype: 'tlist',
itemId: 'myList',
store: 'MyTestStore',
},
{ // Bottom Banner
xtype: 'bottombanner',
},
]
},
initialize: function(){
var test = Ext.getStore('MyTestStore').load({extraParams:{man:'test'}});
console.log(test);
}
});
You can do this in two ways,
App default extra param set to 123
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel'
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
extraParams: {
man: '123'
},
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
}
});
When loading the store you can change extra param like the following way
initialize: function(){
var test = Ext.getStore('MyTestStore').getProxy().getExtraParams().man= '567'
Ext.getStore('MyTestStore').load();
console.log(test);
}
In Another way you can change proxy url without setting extra param
initialize: function(){
var url = 'http://test.com/api/test/'; // your store proxy url
var modified = url+'parameter you get from user'
Ext.getStore('MyTestStore').getProxy().setUrl(modified);
Ext.getStore('MyTestStore').load();
console.log(test);
}
How can I access the function getTree in my TreeStore-Instance from the configuration of the DirectProxy? Like this etc. nothing works....
Is somebody able to help me?
Ext.define('PM.store.Projects', {
extend: 'Ext.data.TreeStore',
model: 'PM.model.Project',
autoLoad: true,
/*proxy: {
type: 'ajax',
url: 'data/projectTree.json',
reader: {
type: 'json',
},
},
root: {
name: 'Test',
id: -1,
}*/
proxy: {
type: 'direct',
directFn: PM.controller.Projects.getTree,
},
/*root: {
name: 'Demo',
children: [
{
name: 'Test',
leaf: true,
},
],
},*/
getTree: function() {
alert("Test");
}
});
You can build you proxy in the constructor I suppose.
Ext.define('PM.store.Projects', {
extend: 'Ext.data.TreeStore',
model: 'PM.model.Project',
autoLoad: true,
constructor: function(config) {
var me = this;
Ext.apply(me, config);
me.proxy = {
type: 'direct',
directFn: me.getTree
};
me.callParent();
},
getTree: function() {
alert("Test");
}
});