Pages

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

No comments:

Post a Comment