Customizing the list control - Sencha Touch mobile web application


Published on

A tutorial from my blog on how to customize the look and feel of the default Sencha Touch List control and give it something of your own.

Published in: Technology, Business
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Customizing the list control - Sencha Touch mobile web application

  1. 1. Customizing the List control – Sencha TouchA post from my blog on how to customize the look and feel of the default Sencha Listcontrol.In this tutorial I am going to discuss and show you how to customize the look and feel of the default Sencha Listcontrol. As you might know the normal list control that Sencha provides has a basic structure which looks like theimage on the left below. You can see that it has got individual list items which are laid down vertically and can bescrolled down to see more items. List uses an Ext.XTemplate as its internal templating mechanism which defines thelook and feel. The data for the List comes from a which is bound to it. Whenever there is a change indata in the Store the change is automatically reflected in the List since it is bounded. I have discussed about how tocreate basic List in my previous tutorials. Now let’s modify the look of the List control. We will make a List that lookslike the image on the right. You can see in the new list, it is complete customization of each items. So, now we havemore of a <div> block with custom styles and images. Let’s see how this can be done.Item Templates / XTemplatesIf you have worked with Flex you might have heard of something called ItemRenderer. Ok, let me tell a little aboutthem if you have no idea. So, ItemRenderer’s are like custom templates using which you can customize the look ofyour List items, or it can be any Data control for eg. a DataGrid as well. Here is a good tutorial on ItemRenderers. So,we are going to do similar things in our Sencha List control.
  2. 2. Ok now, let’s talk a little about item templates before we move to the actual work in hand. Item templates are createdby using the Ext.XTemplate class and it will define the look and feel along with what fields you will be displaying ineach of your list item. This is how to create basic XTemplate var tpl = new Ext.XTemplate( <p>Kids: , <tpl for=".">, // process the node <p>{name}</p>, //display the name </tpl></p> );As you can see in the simple example we have created a basic XTemplate. The tpl tag and the for operator are usedto process the provided data object. It is mainly meant for looping the data objects. Remember that your data isprovided by the Store and this can be a JSON data or an XML which has a hierarchical structure something like this var data = { //JSON data object name: Tommy Maintz, title: Lead Developer, company: Ext JS, Inc, email:, address: 5 Cups Drive, city: Palo Alto, state: CA, zip: 44102, drinks: [Coffee, Soda, Water], kids: [{ name: Joshua, age:3
  3. 3. },{ name: Matthew, age:2 },{ name: Solomon, age:0 }] };As you can see the property kids is an array of objects (with properties name and age). So to loop around each kidinside the data object we can write something like this in our XTemplate var tpl = new Ext.XTemplate( <p>Name: {name}</p>, <p>Title: {title}</p>, <p>Company: {company}</p>, <p>Kids: , <tpl for="kids">, // interrogate the kids propertywithin the data <p>{name}</p>, </tpl></p> );You can see the value assigned to the for operator which is kids, so it will loop through each kid object and print thename. Also you can see the {name} inside the tags, it is kind of a placeholder or rather a replacement of the objectproperty. This {name} field defined here actually comes from the model that the store has declared in it. Exampleshown below Ext.regModel(kidModel, { fields: [name] //fields are declared here });
  4. 4. var kidStore = new{ model: kidModel, data: dataObj //that we have defined above }); store inline data so we have assigned the value of dataObj that we have created earlier in ourtutorial to the data property inside our store. You can learn more on, Models and XTemplates fromthe Sencha Touch API docs. Also I will be posting some more tutorials on these soon. Now to put all these together ina List, it will look something like this var myList = new Ext.List({ id:myList, layout:fit, store:kidStore, itemTpl: tpl, emptyText:Sorry, no data! });Ok, we have seen some basic concepts and I will not deviate further away from our real topic on hand that is tocustomize the List control.CustomizationTo customize the List control, we will have to make changes mainly in our XTemplate where we will create newHTML elements such as <div> for example, and wrap our data fields inside them and then style our <div>’s that wehave created using basic CSS. So here we go, this will be the data that we will show in our list var productData = [ {"name": "iPod", "price": "$300", "image_url":"images/ipod.png", "in_stock": "yes"}, {"name": "Toaster", "price": "$200", "image_url":"images/toaster.png", "in_stock": "yes"},
  5. 5. {"name": "Clock", "price": "$120", "image_url":"images/clock.png", "in_stock": "no"}, ];Lets define our model with all the fields we needExt.regModel(productModel, {fields: [name,price,image_url,in_stock]});Now lets create our store that will hold the data var productStore = new{ model: productModel, data: productData });Now, most important of all of them, lets create our XTemplate. Before writing code the image below shows the basiclayout structure of the block that we will design for each List item.As you can see above we have a main <div> block which contains two <div> blocks inside it, the title <div> block andthe body <div> block that will hold the product image and other details. Here is the XTemplate for our custom block var productTemplate = new Ext.XTemplate( <tpl for=".">, <div class="productBox">, <div class="productTitle">, {name}, <img class="nextIcon"src="images/next.png"/>, </div>, <div class="productBody">, <img class="productImage"src="{image_url}"/>,
  6. 6. <ol>, <li>Price: {price}</li>, <li>In Stock: {in_stock}</li>, </ol>, </div>, </div>, </tpl> );There are three items in the data so <tpl for=”.”> will loop three times each for one data object. And then it will putthe values of the corresponding fields in the placeholders. As you can see in the code block we have a div boxofclassname = ‘productBox’. It holds two <div> blocks inside it, one for the title (class = ‘productTitle’) and theother for the body (class=’productBody’). The styles for them are all defined in the CSS which I will show later. Youcan also see in the code block the images that have been put together. Overall the code block is pretty simple andself-explanatory. Now lets bind the store, template to our list. This is how to do it var productList = new Ext.List({ styleHtmlContent:true, store: productStore, itemTpl: productTemplate, layout:fit, height:"100%", emptyText:Oops! No data });And then we can put our List in a Panel for it to display. Lets look at the full code and then I can explain more<!DOCTYPE html><html><head> <title>Custom List</title>
  7. 7. <link href="css/sencha-touch.css" rel="Stylesheet" /> <script type="text/javascript" src="js/sencha-touch.js"></script> <script type="text/javascript"> Ext.setup({ tabletStartupScreen: tablet_startup.png, phoneStartupScreen: phone_startup.png, icon: images/homeblue.png, glossOnIcon: false, onReady: function(){ var productData = [ {"name": "iPod", "price": "$300", "image_url":"images/ipod.png", "in_stock": "yes"}, {"name": "Toaster", "price": "$200", "image_url":"images/toaster.png", "in_stock": "yes"}, {"name": "Clock", "price": "$120", "image_url":"images/clock.png", "in_stock": "no"}, ]; Ext.regModel(productModel, {fields:[name,price,image_url,in_stock]}); var productTemplate = new Ext.XTemplate( <tpl for=".">, <div class="productBox">, <div class="productTitle">,
  8. 8. {name}, <img class="nextIcon"src="images/next.png"/>, </div>, <div class="productBody">, <img class="productImage"src="{image_url}"/>, <ol>, <li>Price: {price}</li>, <li>In Stock: {in_stock}</li>, </ol>, </div>, </div>, </tpl> ); var productStore = new{ model: productModel, data: productData }); var productList = new Ext.List({ styleHtmlContent:true, styleHtmlCls:testHtml, overItemCls:testOver,
  9. 9. selectedItemCls:testSelect, pressedCls:testPress, layout:fit, height:"100%", emptyText:Oops! No data, store: productStore, itemTpl: productTemplate }); //main viewport new Ext.Panel({ fullscreen:true, dockedItems:[{xtype:toolbar, title:Custom ProductList}], dock:top, scroll:vertical, items:[productList] }); } }); </script></head><body>
  10. 10. </body></html>We have pretty much discussed the things needed to create our custom product list. However, in the productListcontrol above you can notice some CSS class properties that have been bolded. We have provided some CSS classnames (for eg. testOver) for specific purpose. Here they are styleHtmlCls:testHtml, overItemCls:testOver, selectedItemCls:testSelect, pressedCls:testPress,You might ignore this for your custom List, but I will tell you that these are important. These are predefined CSS classnames for the List control and by setting custom classes you can further control the look of your custom List. Theseare the definitions of the properties from the Sencha Touch API docsstyleHtmlCls : StringThe class that is added to the content target when you set styleHtmlContent to true.This means that this CSS class will define the overall look of your list.overItemCls : StringA CSS class to apply to each list item on mouseoverselectedItemCls : StringA CSS class to apply to each selected item in the listpressedCls : StringA CSS class to apply to an item in the list while it is being pressedWe will set the CSS styles for all these classes in our CSS block. Lets see our CSS block now<style> .productBox { border:1px solid #9a9a9a; }
  11. 11. .productTitle{ border-bottom:1px solid #9a9a9a; padding:5px 10px 0px 10px; background-color:#ccc; font-weight:bold; height:30px;}.nextIcon{ float:right;}.productBody{ padding:10px;}.productBody ol{ float:right;}
  12. 12. .productBody ol li { list-style:none; } .productImage { width:50px; } .testSelect { background-color:#efefef; } .testPress { /*I want that nothing should happen, so blank*/ } .testHtml { font-family:Helvetica Neue, HelveticaNeue, Helvetica-Neue, Helvetica,BBAlpha Sans, sans-serif;
  13. 13. font-size:15px; } .testOver { background-color:#aaaaaa; } </style>Simple CSS code, nothing fancy here. Note the custom CSS classes testOver, testHtml, testPress,testSelectdefined in the product List. We have put some CSS rules for them. Now, include this CSS block in yourindex page and we are ready to go. You should be able to see this at the end
  14. 14. A Custom Product ListHere is the demo application. Open it in your touch phone or test it in which is an onlineiPhone simulator. This is it and we are good to go I guess.