Extjs Not Showing data from store - javascript

I`m learning Extjs and trying to follow this tutorial http://www.sencha.com/learn/the-mvc-application-architecture/
Everything went well..
But when I continue to 'Creating a Model and a Store' and do as written in tutorial then run it.
It give error : Uncaught TypeError: Cannot read property 'items' of undefined
Is there is something I missed up?
Thank you
/app/controller/User.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
'Users'],
models: ['User'],
views: [
'user.List',
'user.Edit'],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
},
'userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function (grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
onPanelRendered: function () {
console.log('panel rendered');
}
})
/app/model/User.js
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['name', 'email']
});
/app/store/Users.js
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
data: [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
});
/app/view/user/Edit.js
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',
title : 'Edit User',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
/app/view/user/List.js
Ext.define('AM.view.user.List',{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
store: 'Users',
title: 'All users',
});
/myapp.js
Ext.application({
name: 'AM',
controllers : ['Users'],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'userlist',
}
]
});
}
});
/index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="myapp.js"></script>
</head>
<body>
Loading apps.........
</body>
</html>
Extjs library is located at
/extjs

Just as a syntax based comment, you have an extra comma after 'userlist' in your myapp.js file and also after 'All Users' in your List.js file.
Also, in the comments on that tutorial there is reference to a similar issue where the resolution was to:
define the ‘columns’ property for the ‘List’ view
Try adding this to your list:
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email'}
]

Okay look like that you want to try the sencha mvc example # examples/app/simple
This example have a bug because the need to explicit load of Ext.container.Viewport on application launch
launch: function() {
Ext.create('Ext.container.Viewport', { //this line do explicit load on Viewport class
So to solve this you need an extra line on your myapp.js at the first line
Ext.Loader.setConfig({enabled:true}); //need to enable dynamically load the Ext.container.Viewport
Ext.application({
name: 'AM',
//paths direct to the Ext src path folder i.e given here if accessed from http://localhost/ext/examples/app/simple/simple.html
paths: {
'Ext': '../../../src/'
},
controllers: [
'Users'
],
....

Related

ExtJS, how to bind ViewModel to component config parameters?

On ExtJS 6.02 I would like to bind a ViewModel to my component config parameters.
I tried what it says here: https://stackoverflow.com/a/27284556 but it doesn't work, it's not binding.
This prints Null instead of 123:
Ext.define('MyApp.viewmodel.Test', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test',
data: {
serverPathData: ''
}
});
Ext.define('MyApp.view.TestFileField', {
extend: 'Ext.form.field.Text',
xtype: 'TestFileField',
viewModel: {
type: 'test'
},
config: {
serverPath: null
},
publishes: 'serverPath',
bind: {
serverPath: '{serverPathData}'
}
, initComponent: function() {
this.getViewModel().set('serverPathData', '123');
this.getViewModel().notify();
console.log(this.getServerPath());
this.callParent()
}
});
Ext.application({
name: 'MyApp',
launch: function() {
var testFileField = Ext.widget({
xtype: 'TestFileField',
renderTo: Ext.getBody()
});
}
});
Using testFileField.getViewModel().notify(); does solve the problem in this example, but in my case it doesn't.
I have a shared viewModel.
Found one solution, if I call this.initBindable(); on initComponent it works:
Ext.define('MyApp.viewmodel.Test', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.test',
data: {
serverPathData: ''
}
});
Ext.define('MyApp.view.TestFileField', {
extend: 'Ext.form.field.Text',
xtype: 'TestFileField',
viewModel: {
type: 'test'
},
config: {
serverPath: null
},
publishes: 'serverPath',
bind: {
serverPath: '{serverPathData}'
}
, initComponent: function() {
this.initBindable();
this.getViewModel().set('serverPathData', '123');
this.getViewModel().notify();
console.log(this.getServerPath());
console.log(this.getViewModel().data);
this.callParent();
}
});
Ext.application({
name: 'MyApp',
launch: function() {
var testFileField = Ext.widget({
xtype: 'TestFileField',
renderTo: Ext.getBody()
});
}
});
The problem with this is that this method is private and is already called on beforeRender and afterRender and I don't know if calling it on initComponent or constructor could cause some problem.

XTemplate definition on items property of a ListItem

I'm using Sencha 2.3.0 and I want to have a XTemplate side-to-side to a component (textfield) on a ListItem. The code above works fine for DataView/DataItem, but I want to use the grouped property that is only available on List/ListItem.
The nested Xtemplate gets rendered fine as DataItem. How can I make it work for ListItem? I'm also receptive for solutions that drop this nested structure and use the xtemplate as tpl property directly on the ListItem (of course the textfield with listeners must be implemented as well).
list
Ext.define( 'app.view.myList', {
//extend: 'Ext.dataview.DataView',
extend: 'Ext.dataview.List',
xtype: 'mylist',
requires: [
'app.view.MyItem'
],
config: {
title: "myTitle",
cls: 'mylist',
defaultType: 'myitem',
grouped: true,
store: 'myStore',
useComponents: true,
itemCls: 'myitem',
items: [
{
// some components
}
]
}
});
listitem
Ext.define( 'app.view.myItem', {
//extend: 'Ext.dataview.component.DataItem',
extend: 'Ext.dataview.component.ListItem',
xtype: 'myitem',
config: {
cls: 'myitem',
items: [
{
xtype: 'component',
tpl: new Ext.XTemplate([
'<table cellpadding="0" cellspacing="0" class="myitemXTemplate">',
//some xtemplate content
'</table>'
].join( "" ),
{
compiled: true
})
},
{
label: 'some label',
cls : 'myitemtextfield',
xtype: 'textfield',
name: 'myitemtextfield'
}
]
}
});
Thanks in advance!
Modifed /touch-2.4.2/examples/list/index.html
The model:
Ext.define('model1', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
}
});
The CustomListItem
Ext.define('DataItem', {
extend: 'Ext.dataview.component.ListItem',
xtype: 'basic-dataitem',
requires: [
'Ext.Button',
'Ext.Component',
'Ext.layout.HBox',
'Ext.field.Checkbox'
],
config: {
dataMap : {
/* getFirstname : {
setData : 'firstName'
},*/
getLastname : {
setValue : 'lastName'
}
},
layout: {
type: 'hbox',
height:'200px',
},
firstname: {
cls: 'firstname',
xtype:'component',
data:{data:'hej'},
tpl: new Ext.XTemplate([
'<H1>',
'{data}',
'</H1>'
].join(""),
{
compiled: true
})
},
lastname: {
xtype:'textfield',
css:'lastname'
}
},
applyFirstname : function (config) {
return Ext.factory(config, Ext.Component, this.getFirstname());
},
updateFirstname : function (newName) {
if (newName) {
this.add(newName);
}
},
applyLastname : function (config) {
return Ext.factory(config, Ext.Component, this.getLastname());
},
updateLastname : function (newAge) {
if (newAge) {
this.add(newAge);
}
},
applyFirstName: function (config) {
return Ext.factory(config, 'Ext.Component', this.getLastname());
},
updateRecord: function(record) {
if (!record) {
return;
}
this.getFirstname().setData({data:record.get("firstName")});
this.callParent(arguments);
}
});
The store
var store = Ext.create('Ext.data.Store', {
//give the store some fields
model: 'model1',
//filter the data using the firstName field
sorters: 'firstName',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
groupFn: function (record) {
return record.get('firstName')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
The list
xtype: 'list',
useSimpleItems: false,
defaultType: 'basic-dataitem',
id: 'list',
ui: 'round',
//bind the store to this list
store: store

ExtJS 4.2.1 - getters/setters using Associations not working

I'm having trouble trying to invoke getters/setters on a Model object that has an association with one other model. Here are the classes:
Category.js
Ext.define('Chapter05.model.Category', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
})
Product.js
Ext.define('Chapter05.model.Product', {
extend: 'Ext.data.Model',
requires: [
'Chapter05.model.Category'
],
fields: [
{ name: 'id', type: 'int' },
{ name: 'category_id', type: 'int' },
{ name: 'name', type: 'string' }
],
// we can use the belongsTo shortcut on the model to create a belongsTo association
associations: [
{ type: 'belongsTo', model: 'Chapter05.model.Category' }
]
})
Main.js
Ext.define('Chapter05.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel'
'Chapter05.model.Product',
'Chapter05.model.Category',
],
xtype: 'app-main',
layout: 'vbox',
items: [
{
xtype: 'button',
text: 'Category',
handler: function(evt) {
var product = new Chapter05.model.Product({
id: 100,
category_id: 20,
name: 'Sneakers'
});
product.getCategory(function(category, operation) {
// do something with the category object
alert(category.get('id')); // alerts 20
}, this);
}
}
]
});
The error occurs at the line where product.getCategory(...) is. I get the following message in Safari Web Inspector:
TypeError: 'undefined' is not a function (evaluating 'product.getCategory')
Am I forgetting to do something?
P.S.
The project(Chapter05) was generated using Sencha Cmd. Hence, the fully qualified names.
I've had a similar problem with a hasOne relation. It was solved by specifying the getters/setters and the associationKey yourself.
Something like:
belongsTo: {
model: 'Chapter05.model.Category',
getterName: 'getCategory',
setterName: 'setCategory',
associationKey: 'category_id'
}

ExtJS 4.1.1 | Why `view` and `this` are different in event handler function of inherited class

I wrote my own My.grid inherited from Ext.grid.Panel and set listener on itemdblclick event.
Handler function of this event gets view as the first argument and has this as the scope.
I don't understand why I get different values in view and this?
this is an instance of My.grid
view is an instance of Ext.grid.Panel (but I expect My.grid)
May be I'm doing something wrong? or is it a bug/feature of ExtJS?
How to write inherited widgets there view refs to inherited object?
This is quick example:
<!DOCTYPE html>
<html>
<head>
<title>ExtJS Test page</title>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all-gray.css">
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'change'],
data: {
'items': [
{ 'name': 'Lisa', 'email': 'lisa#simpsons.com', 'change': 100 },
{ 'name': 'Bart', 'email': 'bart#simpsons.com', 'change': -20 },
{ 'name': 'Homer', 'email': 'home#simpsons.com', 'change': 23 },
{ 'name': 'Marge', 'email': 'marge#simpsons.com', 'change': -11 }
]
},
proxy: { type: 'memory', reader: { type: 'json', root: 'items' } }
});
Ext.define('MY.grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.simpsonsgrid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email' },
{ header: 'Change', dataIndex: 'change' }
],
initComponent: function () {
this.callParent(arguments);
this.on('itemdblclick', this.test, this);
},
test: function (view, record) {
console.log(this); // instance of My.grid
console.log(view); // instance of Ext.grid.Panel
}
});
Ext.onReady(function () {
Ext.widget('simpsonsgrid', {
renderTo: Ext.getBody()
});
});
</script>
</head> <body></body> </html>
Look into API (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel). You can see there that this particular event has following signature:
itemdblclick(
Ext.view.View this,
Ext.data.Model record,
HTMLElement item,
Number index,
Ext.EventObject e,
Object eOpts
)
So actually you should get an istance of Ext.grid.View in view argument. You can get instance of MY.grid by accessing view.ownerCt.
Example: http://jsfiddle.net/TLEFH/

Sencha 2.x MVC: Get element by id

I just started using Sencha framework 2.x. This is my app:
app/app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'App',
controllers: ['Generators'],
models: [],
stores: [],
views: ['Main', 'Generator'],
launch: function() {
Ext.create('App.view.Main');
}
});
app/view/Main.js
Ext.define('App.view.Main', {
extend: 'Ext.NavigationView',
requires: [
'App.view.Generator'
],
config: {
fullscreen: true,
items: [
{
xtype: 'generatorview'
}
]
}
});
app/view/Generator.js
Ext.define('App.view.Generator', {
extend: 'Ext.Container',
xtype: 'generatorview',
id: 'generator',
config: {
layout: 'vbox',
items: [
{
xtype: 'panel',
html: 'My message: <a id="xxxSet">Set</a> :: <span id="xxxMsg">...</span>',
flex: 1
},
{
dock: 'bottom',
xtype: 'toolbar',
items: []
}
]
}
});
app/controller/Generator.js
Ext.define('App.controller.Generators', {
extend: 'Ext.app.Controller',
config: {
refs: {}
},
init: function() {
this.control({
'#xxxSet': { // QUESTION1
tap: 'setMyMessage'
}
});
},
setMyMessage: function() {
'#xxxMsg'.html('Set this message'); // QUESTION2
}
});
As you can see I placed questions in the last part (controller).
QUESTION1: How can I set a tap function to the element (#xxxSet)
defined in the view as HTML content.
QUESTION2: How can I set a
message the the element (#xxxMsg) defined in the view as HTML
content.
xxxSet = id of a button
xxxMsg = id of a message holder
Thx!
You can use Ext#get (which accepts a string which is the id) which will return a instance of Ext.dom.Element. With that, you can use the on method to add listeners (much like control) and then the setHtml method to update the contents.
init: function() {
Ext.get('xxxSet').on({
tap: 'setMyMessage',
scope: this
});
},
setMyMessage: function() {
Ext.get('xxxMsg).setHtml('Hello');
}
If you use itemId, you can not access it with Ext.get(). You can try Ext.ComponentQuery.query() instead of that.
init: function() {
Ext.ComponentQuery.query('#xxxSet').on({
tap: 'setMyMessage',
scope: this
});
},
setMyMessage: function() {
Ext.ComponentQuery.query('#xxxMsg).setHtml('Hello');
}

Categories