View Full Version : Setting up a grid view

9 Aug 2011, 9:36 PM

I am completely new to Sencha Touch and pretty new to JS in general (designer by trade). I've been learning Sencha Touch trying to set up a mobile site/app for a client and haven't gotten too far beyond making the pages I need help.

I am trying to set up a grid view for a game site and so far what i have is just HTML within one of the pages I've made (followed a tutorial step by step). The issue with the way I have it set up is that the html is incredible hard to read after I put in a few of the games into it. Mainly I want to have the grid center aligned so regardless of how I have the iphone or tab oriented the content remains center aligned.

Here's what I have currently for the game view and plan to add in hundreds of games into it:

ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
title: "home",
iconCls: "home",
initComponent: function() {
Ext.apply(this, {
defaults: {
styleHtmlContent: false
items: [{
title: 'Latest Games',
scroll: 'vertical',
html: '<div class="main_candy"><div class="latest_games"><div class="game-holder"><div class="game"><a href="games/sw"><div class="game_counter">666 plays</div><img class="game_img" src="http://src.sencha.io/http://dulcefina.com/test/rc_ui/public/lib/images/sw_btn.jpg" alt="Ministry of War" /><div class="game_description"><div class="game_title">Slot World</div> Play the popular arcade game here on rcloud</div></a></div></div></div>'
title: 'Popular Games',
scroll: 'vertical',
html: '<div class="main_candy"><div class="popular_games"><div class="game-holder"><div class="game"><a href="games/pninja"><div class="game_counter">666 plays</div><img class="game_img" src="http://dulcefina.com/test/rc_ui/public/lib/images/pn_btn.jpg" alt="Ministry of War" /><div class="game_description"><div class="game_title">Pockie Ninja</div> Love ninjas? We do too, Pockie Ninjas is a brand new game based on Naruto anime. Play now!</div></a></div></div></div>'
ToolbarDemo.views.Homecard.superclass.initComponent.apply(this, arguments);

Ext.reg('homecard', ToolbarDemo.views.Homecard);

As you can see everything within HTML variable is one game and that can get really confusing as i add more games. Any help will do really. Thanks in advance

9 Aug 2011, 10:40 PM
What you probably want is a list in each tab. Look at Ext.List and tpl property to configure the format of each game in the list.