Friday, February 4, 2011

How to capture orientation change event using Sencha Touch

One of the classy/awesome feature of an iPad, is the way the screen changes resolution/orientation as and when you rotate the iPad physically. The pages that you see on the screen switches between landscape to portrait mode just like that in a nice smooth continuous fashion.

Hence it becomes important for a iPad application developer to ensure that the page we develop for the iPads, looks good in all orientations and hence we definitely have to know where and when to change the application's styles.

For a simple panel created using using Sencha Touch, add the following property to capture the orientation changing event and you are set to go. Hope this is applicable to all components in sencha touch.


listeners: {
orientationchange : yourCustomFunction
}


Hope this helps :)

6 comments:

  1. Hello,

    I am developing a requirement in Xpage in which I trying to show data from two database in a single view,I tried using tabbed table and display two views in two tab of table which is not useful for customer then I used a data table in which i cannot attach pager as pager need to be attached to single repeat and I have used two repeat to display data from two db views.

    My second concern is about search functionality which i have developed in Xpage ver 8.5.1,but I am not able to display document from other db's containing a keyword in the attachment.I am using partial refresh and have placed the view in the panel and refreshing panel,i wanted FT search technique to search even keyword in the attachment and bring it up in the search view.

    Lastly I am trying to use window.close() method in client 8.5.1 to close current xpage as I am placing exit label on main xpage and pressing exit xpage should close but window.close() client side script don't seem to work in 8.5.1

    Any help from xpage developer will be helpful i have gone thru some blogs i.e. john mackey etc,xpage info and wiki site but could not get proper workaround.

    Thanks.

    ReplyDelete
  2. Hi Kapil,

    I am not clear with your question.

    1. y do u need a repeat control to display a view.

    2. Regarding the FT Search, you have a attribute named "search" in the all properties section of the view control. Just right your query (which returns true or false) there and you are good to go.

    Not sure if it works with keywords in an attachement.

    3. And As far as I know, window.close hmmm.... will not work in XPages.I have tested it in both 8.5.1 as well as 8.5.2

    attempting to close a page on the browser as far as I understand is not advisable. Better have them redirected to a Thank You page. 'cos attempting to close the page, does not only close your page but also the entire browser. remember... all other tabs in the browser that is the user is using will be closed if your code works!!!... Yikes

    :) Regards,
    Karthick

    ReplyDelete
  3. I have done this and it is 'curing' the problem that Sencha has with orientation change and failure to resize stuff properly:

    App.views.Viewport = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    listeners:{
    orientationchange: function(panel, orientation, width, height){
    App.views.Viewport.doLayout();
    }
    },

    ReplyDelete
  4. This is a very nice tip. Thanks for sharing the same :)

    ReplyDelete
  5. Hi Karthikeyan,

    This comment has nothing to do with this post but I couldn't find contact information. I'm hoping you can contact me as I think your experience would be helpful (if you're willing) in an opensource project (XBlog) I'm working on. I'm starting to integrate mobile support and am looking for contributors. Please contact me at keithstric at gmail dot com if you're interested.

    ReplyDelete
  6. Have sent you a mail.Please check the same and get back to me

    ReplyDelete