Results 1 to 2 of 2

Thread: sanity check: making whole classes for widgets

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234

    Default sanity check: making whole classes for widgets

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

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234

    Default

    EDIT:

    Code:
     
     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();
    },

Similar Threads

  1. Sanity check for Ext.form.NumberField
    By beegeedee in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 26 Aug 2010, 3:36 AM
  2. Replies: 11
    Last Post: 20 May 2009, 11:46 PM
  3. Sanity Check - Is this the correct way??
    By alex1001 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 6 Apr 2009, 11:06 PM
  4. v0.1 Qo Widgets : Widgets Manager for qWikiOffice
    By Ytorres in forum Community Discussion
    Replies: 12
    Last Post: 19 Oct 2008, 11:50 AM
  5. Builder classes/Preconfigured Classes
    By zhiliang in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 7 May 2008, 1:33 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •