PDA

View Full Version : Can't see data



bstras21
28 Jan 2011, 6:37 AM
Hello, I am new to sencha touch so if someone can point me in the right direction that would be great. My problem is that I want to display data from my database. I seem to have everything working correctly when I inspect the elements I see the data but I can't see the data on the screen Here is my code:

getUserList.js


////////////////////////////////////////////////MODEL/////////////////////////////////////////////////
Ext.regModel("User", {
fields: [
"id",
"name",
"username",
"password",
"email",
"phone"
]
});

////////////////////////////////////////////////STORE/////////////////////////////////////////////////
var myStore = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '../sencha/php/getUserList.php',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});

/////////////////////////////////////////////////////////////////////////////////////////////////


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{id}">',
'<div class="thumb">title="{name}"></div>',
'<span class="x-editable">{name}</span></div>',
'<div style="background-color:#00F" class="thumb-wrap" id="{id}">{id}</div>',
'</tpl>',
'<div class="x-clear"></div>'
);

var panel = new Ext.extend(Ext.Panel,{
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
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:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
//panel.render(Ext.getBody());

Ext.reg('userPanel', panel);

index.html



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>User</title>

<script type="text/javascript" src="sencha/sencha-touch.js"></script>
<script type="text/javascript" src="js/getUserList.js"></script>

<link href="sencha/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />



<script type="text/javascript">
var topPanel = {
style: 'padding:15px; background-color: #F00',
html: 'color2'
};

new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items:[{
xtype: 'userPanel'
}],
dockedItems: [topPanel]
});
}
});

</script>


</head>
<body></body>
</html>

Thanks, for any help!

bstras21
28 Jan 2011, 9:57 AM
I figured it out, I had to add a layout to my xtype in my index.html file