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 :)

How to get the current node/leaf selected in a NestedList - Sencha Touch Framework

The following code fragment will help you alert the text that is present in the leaf/node of  a nested list which is being clicked. The nested list one which is created using sencha framework

activeListItem = yourNestedList .getActiveItem(),
associatedRecord = activeListItem t.getSelectedRecords()[0];
alert( record.get('text'))

Hope this helps :)

OnClick event for list items in NestedList - Sencha Touch Framework

Following is a fragment of code that builds a plugin to listen to the click events on the leaf/list items in a NestedList created using the Sencha Touch Framework. This is already present in the Kitchen Sink example provided in the Sencha Touch's Site

---------------------------Block A---------------------------
/**
* @class Ext.LeafSelectedPlugin
* @extends Object
*
* A simple plugin for a NestedList which adds a "leafselected"
* event which accounts for cardswitching and selectionchange.
*
* This is useful when you want to enable editing of all leaf items.
*/
Ext.LeafSelectedPlugin = Ext.extend(Object, {
init: function(nestedList) {
this.nestedList = nestedList;
nestedList.addEvents('leafselected');
nestedList.on('cardswitch', this.onCardSwitch, this);
nestedList.on('selectionchange', this.onSelectionChange, this);
},

onCardSwitch: function(ct, newCard, oldCard, newIndex, animated) {
var nestedList = this.nestedList;
if (newCard.getSelectedRecords) {
var record = newCard.getSelectedRecords()[0];
if (record) {
nestedList.fireEvent('leafselected', record.node.isLeaf());
} else {
nestedList.fireEvent('leafselected', false);
}
} else {
nestedList.fireEvent('leafselected', false);
}
},

onSelectionChange: function(selModel, records) {
var nestedList = this.nestedList,
subList = selModel.view;

if (nestedList.getActiveItem() === subList) {
if (records[0]) {
nestedList.fireEvent('leafselected', records[0].node.isLeaf());
} else {
nestedList.fireEvent('leafselected', false);
}
}
}
});


---------------------------Block A---------------------------
Add the above mentioned code to a script library

Include your script library into the XPage or your HTML file and do the following
---------------------------Block B---------------------------
var yourNestedList =new Ext.NestedList({
  plugins: [new Ext.LeafSelectedPlugin()],
  //your other parameters
});
---------------------------End of Block B---------------------------


Now call the following function to trigger the onclick or onselected event of the leaf/item of the nestedList
---------------------------Block C---------------------------
  yourNestedList .on('leafselected', function(enabled) {
alert('I am on the onclick event of the leaf/item of your nested list');

});
---------------------------End of Block C---------------------------

iPad Detection Using JavaScript

Following fragment of code helps in detecting whether an application is being previewed in a iPad or a normal web client.

// For use within normal web clients 
var isiPad = navigator.userAgent.match(/iPad/i) != null;

// For use within iPad developer UIWebView
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua)

For more info take a look at http://davidwalsh.name/detect-ipad

Hope this helps :)

Sencha Touch

The Sencha Touch API is pretty amazing and is awesome. As far as I have seen it helps you with application developement for mobile/IPad and works well in Safari and webkit. Google Chrome too...:)

But it did not work with IE/Firefox....

Go through the video and I am sure you will thirst for more....



Sencha Touch - Intro to Layouts from Sencha on Vimeo.

The following site contains more such videos and they are all awe some
http://vimeo.com/18134446

hope this helps :)