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...
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 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?
My problem is very similar to this question:
ExtJS4 gridPanel data not showing
but in a bit difference in syntax & behaviour, I've spent day(s) to solve by trying in many ways but failed.
Please note that: i must keep the SharpKit.NET generation behavior by calling parent constructor instead of json field construction, like the code bellow
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
fields: ["title", "pages"] // Do not use this
});
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
constructor: function () {
this.callParent([{ fields: ["title", "pages"] }]); // Use this
}
});
This is link to my simplified version on jsfiddle http://jsfiddle.net/thanhptr/LqXan/. Bellow is my copied code, this code still does not fix:
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
constructor: function () {
this.callParent([{ fields: ["title", "pages"] }]);
}
});
Ext.define("Core.Scripts.store.Store", {
extend: "Ext.data.Store",
constructor: function () {
this.callParent([{
model: "Core.Scripts.model.Book",
data: [
{ title: "book 1", pages: 10 },
{ title: "book 2", pages: 20 }
]
}]);
}
});
Ext.define("Core.Scripts.view.GridPanel", {
extend: "Ext.grid.Panel",
constructor: function () {
this.callParent([{
store: new Core.Scripts.store.Store(),
region: "center",
columns: [
{ header: "title", dataIndex: "title" },
{ header: "pages", dataIndex: "pages" }
]
}]);
}
});
Ext.define("Core.Scripts.view.DetailViewport", {
extend: "Ext.container.Viewport",
constructor: function () {
this.callParent([{
frame: true,
layout: "border",
items: [new Core.Scripts.view.GridPanel()]
}]);
}
});
Ext.onReady(function () {
var viewPort = new Core.Scripts.view.DetailViewport();
});
I couldn't get your example working either, but I changed some code up and got it to work.
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
fields: ["title", "pages"]
});
Ext.define("Core.Scripts.store.Store", {
extend: "Ext.data.Store",
model: "Core.Scripts.model.Book",
data: [
{ title: "book 1", pages: 10 },
{ title: "book 2", pages: 20 }
]
});
Ext.define("Core.Scripts.view.GridPanel", {
extend: "Ext.grid.Panel",
region: "center",
height: '200',
store: Ext.create('Core.Scripts.store.Store'),
columns: [
{ header: "title", dataIndex: "title" },
{ header: "pages", dataIndex: "pages" }
]
});
Ext.define("Core.Scripts.view.DetailViewport", {
extend: "Ext.container.Viewport",
frame: true,
layout: "border",
initComponent: function () {
this.items = [new Core.Scripts.view.GridPanel];
this.callParent(arguments);
}
});
Ext.onReady(function () {
var viewPort = new Core.Scripts.view.DetailViewport();
});
I'm struggling with my application right in the beginning.
this.getScoresStore().on('load', function(score, records) {
var view = Ext.getCmp('scoreView');
view.down('form').loadRecord(records[0].data);
console.log(view.down('form').getRecord());
console.log(view.down('form').getValues());
});
After the store is loaded, I add the records to the form. Console says it's added, however the fields keep beeing empty.
Object { playerOne="301", playerTwo="301" }
Object { playerOne="", playerTwo="" }
Anyone got Ideas what could be wrong?
Controller:
Ext.define('Darts.controller.Scores', {
extend: 'Ext.app.Controller',
views: [
'score.View',
'score.Hit'
],
stores: [
'Scores'
],
models: [
'Score'
],
init: function() {
this.getScoresStore().on('load', function(score, records) {
var view = Ext.getCmp('scoreView');
view.down('form').loadRecord(records[0].data);
console.log(view.down('form').getRecord());
console.log(view.down('form').getValues());
});
this.control({
'scoreView' : {
afterrender: this.formRendered
}
});
},
formRendered: function(obj) {
console.log(obj.down('form').getRecord());
console.log('form rendered');
}
});
Views:
Ext.define('Darts.view.score.Hit' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.scoreHit',
title : 'Hits',
score : 'Scores',
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'playerTwo',
fieldLabel: 'Player 1'
}
]
}
];
this.callParent(arguments);
}
});
Ext.define('Darts.view.score.View' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.scoreView',
id : 'scoreView',
title : 'Player Scores',
score : 'Scores',
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'numberfield',
name : 'playerOne',
fieldLabel: 'Player 1'
}, {
xtype: 'textfield',
name : 'playerTwo',
fieldLabel: 'Player 2'
}
]
}
];
this.buttons = [
{
text: 'Start Game',
action: 'start'
}
];
this.callParent(arguments);
}
});
Store
Ext.define('Darts.store.Scores', {
extend: 'Ext.data.Store',
model : 'Darts.model.Score',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/scores.json',
update: 'data/updateScores.json'
},
reader: {
type: 'json',
root: 'scores',
successProperty: 'success'
}
}
});
Model:
Ext.define('Darts.model.Score', {
extend: 'Ext.data.Model',
fields: ['playerOne', 'playerTwo']
});
Data:
{
success: true,
scores: [
{id: 1, playerOne: '301', playerTwo: '301'}
]
}
I've tried numberfields, textfields as well as changing the data fom with ' to without ' and mixed.... nothing seems to help me.
The fields are rendered before store is loaded (test output still in the code)
I'm really out of ideas here and I've seen many topics, but none fits to my problem or fixes my problem. The form fields always keeps beeing empty.
I think your issue is that you need to pass a Model record into loadRecord method not the underlying data. So try changing line 3 to
view.down('form').loadRecord(records[0]);
As a side note, it's a bit odd to load the entire store just to get at a single record.
You might want to explore Model.load( id, {callback config} ) way of loading exact record that you need.