sencha-touch

I have a tabpanel in sencha touch that looks something that below Mobile.RootViewport = new Ext.TabPanel({ fullscreen:'true', layout: 'card', tabBarDock: 'bottom', items: [Mobile.HomeViewport, Mobile.AboutViewport] }) How do i have a icon for each of the tabs? You need to add an iconCls property to each of the items within your TabPanel (HomeViewport, AboutViewport, etc). There are a handfull of icons compiled into the default theme, but there are many more in the pictos directory (found at $touch/resources/themes/images/default/pictos/ ). The iconCls name will be the same as the filename

I'm running Sencha Touch V2 beta and I'm looking at the most recent documentation . I've followed the Ext.application instructions and am trying to properly lay out my MVC application. Unfortunately I can't figure out how to actually load up a View with this approach. index.js Ext.application({ name: 'rpc', defaultUrl: 'home/index', controllers: ['home'], //note: define controllers here launch: function () { console.log('Ext.application ~ launch'), Ext.create('Ext.TabPanel', { id: 'rpc-rootPanel', fullscreen: true, tabBarPosition: 'bottom', items: [{ title: 'Home', iconCls: 'home' }] }); Ext

I want to add a youtube video in my site using Sencha. I use the following code: var pnl = new Ext.Panel({ layout: { type: 'vbox', pack: 'center' }, items: [{ xtype:'video', url: "space.mp4", loop: true, width: 500, height: 400, poster: 'Screenshot.png' }], fullscreen: true }) Here I replace the space.mp4 with a youtube url but it doesn't work. If I write html:'you tube link' , it works on the browser on my system, but not on iPhone. How can I make this work? One workaround is to embed the video with the embed code (iframe) provided by youtube. Just give your component the html attribute with

I am making an Android app using Sencha. I am using this layout for responsive layout in mobiles and tablets <div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div> </div> Now i also want to specify a different grid layout when i switch from portrait to landscape mode .For example,in mobile screen, i want to use col-xs-6 in portrait mode and col-xs-3 in landscape mode. So how do i do that? I've used this

There is a view with many tabs in my App. I'd like to set focus on the last one. I can set active tab this.setActiveItem(10) , but I'm not able to scroll (programmatically) tabbar to the last item. Content of the 10th tab is shown but 10th item on tabbar is hidden, so user could be confused. Thanks a lot in advance. A really good question and many people may find this useful. So first, instance of tabBar is needed so we can get activeTab of tabPanel . Then we can easily get the offset of tab item. Here, tab item means not the container that holds tab's contents but the tab indicator which can