Friday, February 4, 2011

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

2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Node JS Online Training from India . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Online Training

    ReplyDelete
  2. Nice blog. Thanks for sharing such great information. Hire Sencha Touch Developers

    ReplyDelete