I need that my viewmodel MainModel appears after store 'OrgStore' load.
Now I have next App.js:
Ext.application({
name: 'BillWebApp',
extend: 'BillWebApp.Application',
stores: ['OrgStore'],
requires: [
'BillWebApp.view.main.Main'
],
launch: function () {
var store = Ext.getStore('OrgStore');
store.on('load', function() {
BillWebApp.getApplication().setMainView('main.Main');
});
},
...
OrgStore:
Ext.define('BillWebApp.store.OrgStore', {
extend: 'Ext.data.Store',
alias : 'store.orgstore',
storeId: 'OrgStore',
model: 'BillWebApp.model.Org',
config:{
autoLoad: true,
autoSync: true
},
proxy: {
autoSave: false,
type: 'ajax',
api: {
create : '',
read : '/base/getOrgAll',
update : '',
destroy : ''
},
reader: {
type: 'json'
}
}, listeners: {
load: function() {
console.log("OrgStore loaded!");
}
}
});
MainModel:
Ext.define('BillWebApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'BillWebApp',
},
stores: {
orgstore: {
type: 'orgstore'
}
}
});
Why I in log window see message "OrgStore loaded!" twice?
One after 'OrgStore' loaded, and next one after MainModel started?
I think I invoke two instances of 'OrgStore'....
How can I change my code to show MainModel after store fully load?
Related
Inside the ViewModel I've defined 2 stores and I'm using a gridpanel as view. Is there any chance to state if else condition for bind property inside gridpanel?
ViewModel:
stores: {
dataStore: {
model: 'MyApp.first.Model',
autoLoad: true,
session: true
},
listStore: {
model: 'MyApp.second.Model',
autoLoad: true,
session: true,
},
and on grid panel I want to do this condition;
Ext.define('MyApp.base.Grid', {
extend: 'Ext.grid.Panel',
// Currently binds directly to listStore
bind: '{listStore}',
// but I'm trying to implement a proper adjustment such as this;
// bind: function () {
// var username = localStorage.getItem('username');
// if (username === 'sample#adress.com') {'{dataStore}';} else {'{listStore}'}
// },
You can't use conditional expressions with bind, however, you can use ViewModel's formulas to select which store to use with grid. Here is example of such formula:
conditionalStore: function (get) {
var param = get('param');
if (param === 1) {
return get('simpsonsStore');
}
return get('griffinsStore');
}
And here is working fiddle, which you can play with: https://fiddle.sencha.com/#view/editor&fiddle/2eq2
You can use bindStore method of grid.
In this FIDDLE, I have created a demo using grid. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//defining store 1
Ext.define('Store1', {
extend: 'Ext.data.Store',
alias: 'store.store1',
autoLoad: true,
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: ''
}
}
});
//defining store 2
Ext.define('Store2', {
extend: 'Ext.data.Store',
alias: 'store.store2',
autoLoad: true,
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json',
rootProperty: ''
}
}
});
//defining view model
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
stores: {
gridStore1: {
type: 'store1'
},
gridStore2: {
type: 'store2'
}
}
});
//creating grid
Ext.create({
xtype: 'grid',
title: 'Example of bind the store',
renderTo: Ext.getBody(),
viewModel: {
type: 'myvm'
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
tbar: [{
text: 'Load Store1',
handler: function (btn) {
var grid = this.up('grid');
grid.bindStore(grid.getViewModel().getStore('gridStore1'))
}
}, {
text: 'Load Store2',
handler: function (btn) {
var grid = this.up('grid');
grid.bindStore(grid.getViewModel().getStore('gridStore2'))
}
}]
});
}
});
I need to perform certain operations when a store is loaded. The problem is when the 'load' event of the store is triggered, '$binding' is undefined, and thus the 'owner' property is unavailable.
The store and its listener for the 'load' event are defined in the ViewModel:
Ext.define('App.view.TSegmentacionFrmViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.TSegmentacionFrm',
requires: [
'Ext.data.Store',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
stores: {
oStoreSegmentacion: {
autoLoad: true,
model: 'App.model.oGrid',
proxy: {
type: 'ajax',
extraParams: {
cmd: 'Get',
cCodClass: 'SegmentacionBrw'
},
url: "TGlobalData.ashx",
useDefaultXhrHeader: false,
reader: {
type: 'json',
rootProperty: 'aResultado',
totalProperty: 'nRows'
}
},
listeners: {
load: 'onJsonstoreLoad'
}
}
}
});
The store binding is defined in the View (line 58 of the following code):
Ext.define('App.view.TSegmentacionFrm', {
extend: 'Ext.tab.Panel',
alias: 'widget.TSegmentacionFrm',
requires: [
'App.view.TSegmentacionFrmViewModel',
'App.view.TSegmentacionFrmViewController',
'Ext.tab.Tab',
'Ext.toolbar.Toolbar',
'Ext.toolbar.Separator',
'Ext.grid.Panel',
'Ext.view.Table',
'Ext.grid.column.Action',
'Ext.form.Label',
'Ext.grid.column.RowNumberer'
],
config: {
[...]
},
controller: 'TSegmentacionFrm',
viewModel: {
type: 'TSegmentacionFrm'
},
cls: 'CustomTabs',
itemId: 'TSegmentacionFrm',
activeTab: 0,
deferredRender: false,
initConfig: function(instanceConfig) {
var me = this,
config = {
items: [
{
xtype: 'panel',
itemId: 'oPnlHist',
layout: {
type: 'vbox',
align: 'stretch'
},
bind: {
title: '{lbl_ListadoHist}'
},
dockedItems: [
{
[...]
}
],
items: [
{
xtype: 'TMainBrowseGrid',
cBrwName: 'oBrwSegmentacion',
cCodForm: 'SegmentacionFrm',
cls: 'CustomGrid',
flex: 1,
itemId: 'oGridHistorico',
bind: {
store: '{oStoreSegmentacion}'
},
listeners: {
selectionchange: 'onOGridProductosSelectionChange'
},
columns:
[...]
}
]
},
]
};
[...]
},
});
And this is the onJsonstoreLoad method, in the ViewController:
Ext.define('App.view.TSegmentacionFrmViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.TSegmentacionFrm',
onJsonstoreLoad: function (store, records, successful, operation, eOpts) {
// This '$binding' is undefined
// Uncaught TypeError: Cannot read property 'owner' of undefined at g.onJsonstoreLoad
var oView = store.$binding.owner.getView();
[...]
}
});
What am I doing wrong? The person who wrote this some time ago says it worked, but now it seems to be broken. Thank you.
$binding is some internal property, it's not part of the API, don't use it. By virtue of the callback being in the controller, just call this.getView().
I'm creating a test application in EXT 6 Beta and I'm having a problem populating my stores. I'm trying to populate the stores with test data in the launch function in the Ext.application. The main bits of code are below, with various console.logs present.
Ext.define('myApp.Application', {
extend: 'Ext.app.Application',
name: 'myApp',
// stores: ['Items'],
requires: [ 'myApp.store.Items' ],
launch: function () {
var createTestData = function(){ ... }
var testData = createTestData();
this.getStore('Items').add(testData);
console.log(2,this.getStore('Items').getData());
}
});
The store:
Ext.define('myApp.store.Items', {
extend: 'Ext.data.Store',
alias: 'store.items',
model: 'myApp.Item',
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
The grid:
Ext.define('myApp.view.main.ItemList', {
extend: 'Ext.grid.Panel',
requires: [ 'myApp.store.Items' ],
title: 'Items',
store: { type: 'items' },
columns: [ ... ],
listeners: {
afterrender: function(){
console.log(1, this.getStore().getData());
var self = this;
setTimeout(
function(){
console.log(3, self.getStore().getData());
}, 1000);
}
}
});
The console logs output in this order: 1, 2, 3. Number 1 has data, but neither 2 nor 3 do.
I tried setting the store to a singleton, but this just throws an error saying a Singleton cannot be instantiated. How can I get data to stay in the store or repeatedly access the same store?
As described in the comments the problem was the grid creating a new store rather than using the same one as the Ext.application. So to fix this issue:
The app:
Ext.define('myApp.Application', {
...
stores: ['Items'],
// requires: [ 'myApp.store.Items' ],
...
});
The grid:
Ext.define('myApp.view.main.ItemList', {
...
requires: [
'myApp.store.Items'
],
store: 'Items', // Refers to the store ID
// store: { type: 'items' }, (Created a new store)
...
});
The store:
Ext.define('myApp.store.Items', {
...
id: 'Items',
...
});
I'm new to sencha so I'm sure I'm just missing something simple here. I have a rest service and I need to be able to load my store for my list view.
Here's my model with the proxy:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'UserId', type: 'int' },
{ name: 'FullName', type: 'string' }
],
proxy: {
type: 'rest',
url: '/rest/user',
reader: {
type: 'json',
root: 'user'
}
}
}
});
And this code works fine for a GET request. So I know that I'm able to talk with my rest service.
var User = Ext.ModelMgr.getModel('UserModel');
User.load(10058, {
success: function (user) {
console.log("Loaded user: " + user.get('UserId') + ", FullName: " + user.get('FullName'));
}
});
My problem is that I'm unable to load data into my list view when adding the proxy code to the store. How do I pass in a parameter to the rest service and load the store?
Ext.define('UserStore', {
extend: 'Ext.data.Store',
config: {
model: 'UserModel',
proxy: {
type: 'rest',
url: '/rest/user',
reader: {
type: 'json',
root: 'user'
},
autoLoad: true
},
sorters: 'FullName',
grouper: function(record) {
return record.get('FullName')[0];
}
}
});
And here's my list view:
Ext.define('UserView', {
extend: 'Ext.List',
xtype: 'userView',
config: {
scrollable: 'vertical',
loadingText: "Loading your social connections . . .",
indexBar: true,
singleSelect: true,
grouped: true,
cls: 'customGroupListHeader',
itemTpl: '{FullName}',
store: 'UserStore',
onItemDisclosure: true
}
});
Haha! I knew it was something simple. The "autoLoad: true" in the store's proxy needs to be outside of the proxy's brackets.
Ext.define('UserStore', {
extend: 'Ext.data.Store',
config: {
model: 'UserModel',
autoLoad: true,
I'm trying to learn sencha touch by Oreilly application example which is produced in sencha touch documentation examples. Ext.getStore function returns undefined.
Code:
Ext.application({
//name space of application
name: 'sample',
title: '<img src="lib/resources/images/home.png"/>',
webserviceUrl: 'http://xxx/yyy/zzz.svc/',
requires: ['sample.util.Proxy'],
view: [
'Viewport',
'wares.lists.Popular',
'wares.lists.List'
],
model: [
'WaresListItem'
],
store: [
'Wares'
],
launch: function() {
Ext.Viewport.setMasked({ xtype: 'loadmask' });
sample.util.Proxy.process(function () {
Ext.create('sample.views.Viewport');
Ext.Viewport.setMasked(false);
});
}
});
//------
Ext.define('sample.views.Viewport', {
extend: 'Ext.tab.Panel',
title: 'Hello world!',
xtype: 'viewport',
config: {
fullscreen: true,
tabBar: {
docked: 'bottom',
},
items: [
{ xclass: 'sample.views.wares.lists.Popular' },
]
}
});
//-----
Ext.define('sample.views.wares.lists.Popular', {
extend: 'Ext.NavigationView',
requires: ['sample.views.wares.lists.List'],
xtype: 'Popular',
config: {
iconCls: 'home',
title: 'List',
items: [
{
xtype: 'wares',
}
]
}
});
//-----
Ext.define('sample.views.wares.lists.List', {
extend: 'Ext.List',
xtype: 'wares',
config: {
store: 'Wares',
itemTpl: {}
},
initialize: function () {
this.config.title = sample.app.title;
}
});
//-----
Ext.define('sample.util.Proxy', {
singleton: true,
requires: ['Ext.Ajax'],
process: function(callback) {
var wareListStore = Ext.getStore('Wares'); //returns undefinded
var wareModel;
console.log("Store: ", wareListStore);
Ext.Ajax.request({
url: sample.app.webserviceUrl + 'getSomeItems',
disableCaching: false,
useDefaultXhrHeader: false,
headers: {
"Content-Type": "application/json"
},
method: 'POST',
params: JSON.stringify({"Type":3}),
success: function (response) {
var result = JSON.parse(response.responseText);
if(true === result.Header.Status) {
Ext.Array.each(result.Body, function (ware) {
wareModel = Ext.create('sample.models.WaresListItem', ware);
// wareListStore.add(wareModel); //raises an error
});
} else {
console.log("Error code: %i", result.Header.ErrorCode);
}
},
failure: function (response) {
console.log('Houston, we have a problem!');
console.log(JSON.stringify(response));
}
});
callback();
}
});
//-----
Ext.define('sample.store.Wares', {
extend: 'Ext.data.Store',
config: {
model: "sample.models.WaresListItem"
}
});
I rewrote everything like in an example. What I have missed?
UPDATED: In console I see that store objects script isn't included at all.
Array names must be given these names views, controllers, models, stores and so on. Renaming the arrays fixed it.
Ext.define('sample.store.Wares', {
extend: 'Ext.data.Store',
config: {
model: "sample.models.WaresListItem",
storeId: 'Wares'
}
});
Try this should work... Hope it helps...