PDA

View Full Version : DataView with xtemplate usage



lvavila
6 Feb 2012, 12:34 PM
Hello, learning Sencha I am having trouble with no output being rendered. This has a single app.js and all errors have been cleaned. So I have a logic error somewhere.. Thanks in advance. Meanwhile I will keep googling for answer..


/**
* Created by JetBrains WebStorm.
* User: louiea
* Date: 2/6/12
* Time: 10:21 AM
* To change this template use File | Settings | File Templates.
*/
Ext.setup({
onReady: function() {
Ext.regModel('User', {
fields: [
{ name: 'id' , type : 'int'},
{ name: 'name' , type : 'string'},
{ name: 'username' , type : 'string'},
{ name: 'password' , type : 'string'},
{ name: 'email' , type : 'auto'},
{ name: 'phone' , type : 'auto'}
]
});


var myStore = new Ext.data.Store({
model: 'User',


data : [
{ id : '100' , name : 'Louie' , username : 'louie', password : '123456', email : 'loui@gmail.com', phone : '222.333.4444'},
{ id : '111' , name : 'Pam' , username : 'pam', password : '123456', email : 'pam@gmail.com', phone : '222.333.4444'},
{ id : '104' , name : 'Mark' , username : 'mark', password : '123456', email : 'mark@gmail.com', phone : '222.333.4444'},
{ id : '107' , name : 'John' , username : 'john', password : '123456', email : 'john@gmail.com', phone : '222.333.4444'},
{ id : '105' , name : 'Steve' , username : 'steve', password : '123456', email : 'steve@gmail.com', phone : '222.333.4444'},
{ id : '102' , name : 'Nicole' , username : 'nicole', password : '123456', email : 'nic@gmail.com', phone : '222.333.4444'}
]


/**
proxy: {
type: 'ajax',
url : '../sencha/php/getUserList.php',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true


*/


});




var tpl = new Ext.XTemplate(
'<table id="userTable"',
'<tpl for=".">',


'<tr>',
'<td><span >{id}</span></td>',
'<td><span><a onclick="alert(tpl.name)">{name}</a></span></td>',
'<td>{username}</td>',
'<td>{password}</td>',
'<td>{email}</td>',
'<td>{phone}</td>',
'</tr>',
'</tpl>',
'</table>',
'<div class="x-clear"></div>'
);


var panel = new Ext.extend(Ext.Panel,{
id:'images-view',
frame:true,
//width:535,
autoHeight:true,
collapsible:true,
title:'Simple DataView',
initComponent: function() {
panel.superclass.initComponent.call(this);
},


items: new Ext.DataView({
store: myStore ,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overItemCls:'x-view-over',
itemSelector:'tr',
emptyText: 'No images to display'
})
});


Ext.reg('userPanel', panel);
}
});

mitchellsimoens
6 Feb 2012, 12:43 PM
You're not creating an instance of the class. Ext.extend creates a new class definition which you should do in it's own file and added to index.html with a script tag (order of script tags is important). Then within the onReady method of Ext.setup you need to create the instance like so:


new Ext.Panel({
//config options here
});