PDA

View Full Version : sanity check: making whole classes for widgets



DaveC426913
28 Oct 2010, 6:41 AM
Just want to make sure I'm on the right track. Some of the sample code I see seems slimmer than mine.

I'm building a widget that I'll make good use of; it's a scrolling list of items that has attached up/down scrollbuttons (my users need visual cues, they may not know how to swipe).

I've built it so that all its functioning is internal, all I need to do is call the main object and it works.
It has a wrapper (the only thing my main app sees) and the wrapper contains the scrolling list and the scroll buttons.

But to manipulate the list itself - which is embedded in the wrapper - I now have an abstracted layer to go through. So my wrapper object has a bunch of calls (addItem,removeItem,removeAll,getItems,sort) which then call to the embedded object.

This ensures that my main code is not cluttered with housekeeping duties.

Does this look like wholesome, nutritious coding practrice to you?

My ScrollList class:


MERCON.UI.ScrollList = Ext.extend(Ext.Container, {
height: 168,// default
initComponent: function() {
items: [{
xtype: 'MERCON_UI_textpanel',
id: this.id + "_textpanel",
},{
xtype: 'MERCON_UI_scrollbuttons',
MRC_panelid: this.id + "_textpanel",//gives scroller access to panel
}]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
MERCON.UI.ScrollList.superclass.initComponent.apply(this, arguments);
},

addItems: function(arrItems){
textPanel = Ext.getCmp("myList_textpanel");
for (item=0; item <arrItems.length;item++){
textPanel.add({id:arrItems[item][0],html:arrItems[item][1]});
}
textPanel.doLayout();
},

getItems: function(){
//returns all list items as an object
textPanel = Ext.getCmp("myList_textpanel");
return textPanel.items;
},

removeItems: function(arrItemIDs){ ...etc... },

clearAll: function(){
textPanel = Ext.getCmp("myList_textpanel");
textPanel.removeAll();
}
});

Ext.reg('MERCON_UI_scrolllist', MERCON.UI.ScrollList);



MERCON.UI.TextPanel = Ext.extend(Ext.Container, {
initComponent: function() {
var config = { ... }
Ext.apply(this, Ext.apply(this.initialConfig, config));
MERCON.UI.TextPanel.superclass.initComponent.apply(this, arguments);
},

});
Ext.reg('MERCON_UI_textpanel', MERCON.UI.TextPanel);



MERCON.UI.scrollButtons = Ext.extend(Ext.Container, {
initComponent: function() {
var config = { ... }
Ext.apply(this, Ext.apply(this.initialConfig, config));
MERCON.UI.scrollButtons.superclass.initComponent.apply(this, arguments);

function scroll(listId,direction){
scrollingList = Ext.getCmp(listId);
var scroller = scrollingList.scroller,
offsets = scroller.getOffset();
lineHeight=25;//the height of one line of text - hardcoded for now
scrollAmt = (scrollingList.height-lineHeight)*direction;//
scroller.scrollTo( {x: offsets.x,y: offsets.y + scrollAmt}, true);
}
},
});
Ext.reg('MERCON_UI_scrollbuttons', MERCON.UI.scrollButtons);



Implementation:


Ext.setup({
onReady: function() {
var main = new Ext.Panel({
id: 'myListPage',
items:[{
xtype: 'MERCON_UI_scrolllist',
id: 'myList',
}]
});
thisList = Ext.getCmp('myList');
arrItems = [["i1","Ashford"],["i2","Crompton"],["i3","Davenport"],["i4","Beckett"],["i5","Edgemore"]];
thisList.addItems(arrItems);

DaveC426913
28 Oct 2010, 6:55 AM
EDIT:



addItems: function(arrItems){
textPanel = Ext.getCmp("myList_textpanel");
// oldschool:
// for (item=0; item <arrItems.length;item++){
// textPanel.add({id:arrItems[item][0],html:arrItems[item][1]});
// }
//Ext:
Ext.each(arrItems, function(o){ textPanel.add({id:o[0],html:o[1]}); })

textPanel.doLayout();
},