1. #1
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default Where do YOU look when you're stumped with Sencha touch?

    Where do YOU look when you're stumped with Sencha touch?


    I realize this is a beta version and I'm sure you guys understand this product inside and out, but surely everyone gets stumped occasionally.

    If the example demos don't have a sample of the problem you're encountering, and the API docs do not elaborate, and the Help fora are not forthcoming with guidance, what do you do to solve a problem?

    Once I've stripped everything out of my code and I still can't get it to behave, I get so frustrated that I am tempted to throw my hands in the air and conclude that the product is just too immature to work with. I just don't know where else to turn.

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by DaveC426913 View Post
    I realize this is a beta version and I'm sure you guys understand this product inside and out, but surely everyone gets stumped occasionally.

    If the example demos don't have a sample of the problem you're encountering, and the API docs do not elaborate, and the Help fora are not forthcoming with guidance, what do you do to solve a problem?

    Once I've stripped everything out of my code and I still can't get it to behave, I get so frustrated that I am tempted to throw my hands in the air and conclude that the product is just too immature to work with. I just don't know where else to turn.

    to be honest, I look at:
    - Forums
    - Source code

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2010
    Location
    Norderstedt, Germany
    Posts
    29
    Vote Rating
    0
    SvenWS is on a distinguished road

      0  

    Default


    the source code of api comes with the installation in three flavors: compressed, debug and debug with comments (in the root of the installation). For understanding and learning I prefer the source code with comments.

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    to be honest, I look at:
    - Forums
    - Source code
    But what if there is no reference at all to what you're doing?

    eg. I can find no documentation or example of the scroll event. Though it is a valid event, it is not listed in the API and is not fired in any example. Source code for fireEvent simply consumes the generic "arguments".

  5. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    For that i would set a breakpoint in the event handler, and look at the call stack.

  6. #6
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Yeah, that's what I'm doing now. But of course, that doesn't tell me what I should be doing to get it to work, it only tells me what I have done.

    To know what I should be doing requires a working example so I can see what it's passing.

    eg. I've trapped the parameters of the gesture coming from my scrolling panel. It fires this multiple times:
    args: scroll,[object Object],[object Object] (where object 2 is a set of xy coords. Object 1 appears to be a scroller.

    So now I'm experimenting with this:
    myList.fireEvent('scroll',myList.scroller,{x:0,y:100});
    This should work, but it does nothing yet.

  7. #7
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    why are you firing the scroll event?

  8. #8
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Aside: This thread was meant to be an attempt to help me to learn to fish, rather than an attempt to get a single fish. I'm asking too many questions on the forum and relying on you guys too heavily, so my intention was to find ways of helping myself.

    However, since you're willing:
    Quote Originally Posted by jgarcia@tdg-i.com View Post
    why are you firing the scroll event?
    It is related to this thread:
    http://www.sencha.com/forum/showthre...m-a-button-tap

    In a nutshell: My users do not necessarily know how to 'gesture'. They will need explicit visual up/down buttons to accomplish the same functionality as a swipe-scroll - one button-press = one swipe.


    For clarity, here is my code. I got the constructor function from here. The line hilit in red is wht I'm currently trying to figure out. I've tried several permutations of it.
    Code:
    Concierge.List = Ext.extend(Ext.Container, {
     id:  'myList',
     constructor:function(config) {
         // parent constructor call pre-processing - configure listeners here
         config = config || {};
         config.listeners = config.listeners || {};
         Ext.applyIf(config.listeners, {
             // add listeners config here
       scroll: function(){
        console.log("!");
       }
         });
         // call parent constructor
         Concierge.List.superclass.constructor.call(this, config);
     },
     
     initComponent: function() {
      var config = {
       items: [{
        layout: 'hbox',
        height: 400,
        items: [{
         xtype: 'panel',
         id:'thePanel',
         layout: 'vbox',
         width:500,
         height: 400,
         scroll: 'vertical',
         items:[{html: 'Fresh Produce', cls: 'header'},
         { html: 'Produce'  },
         { html: 'Apples'  },
         { html: 'Bananas'},
         { html: 'Peaches'},
         { html: 'Pears'},
         { html: 'Meat',     cls: 'header'},
         { html: 'Lean Gound Beef'},
         { html: 'Chicken Legs'},
         { html: 'Sliced Ham'},
         { html: 'Fish'},
         { html: 'Bacon'},
         { html: 'Hot dogs'},
         { html: 'Condiments',    cls: 'header'},
         { html: 'Parsley'},
         { html: 'Horseradish'},
         { html: 'Ketchup'},
         { html: 'Mayonnaise'},
         { html: 'Mustard'},
         { html: 'Snacks',     cls: 'header'},
         { html: 'Nuts'},
         { html: 'Raisins'},
         { html: 'Bread',     cls: 'header'},
         { html: 'Hamburger Buns'},
         { html: 'Hot Dog Buns'},
         { html: 'French Bread'},
         { html: 'Dairy',     cls: 'header'},
         { html: '1% Milk'},
         { html: 'Cream Cheese'},
         { html: 'Creamer'},
         { html: 'Packaged Goods',   cls: 'header'},
         { html: 'Baking Powder'},
         { html: 'Baking Soda'},
         { html: 'Toiletries',    cls: 'header'},
         { html: 'Anti-Bacterial Soap'},
         { html: 'Deodorant'},
         { html: 'Floss'},
         { html: 'Lotion'},
         { html: 'Got it',    cls: 'gotit-header'},
         { html: 'Bandaids',cls: 'gotit' },
         { html: 'Mouthwash',cls: 'gotit' }
         ]
                 },{
         xtype: 'container',
         items: [{
          xtype: 'button',
          handler: this.scrollUp,
          text: '^',
         },{
          xtype: 'button',
         }]
        }]
       }],
       
            }
      Ext.apply(this, Ext.apply(this.initialConfig, config));
            Concierge.List.superclass.initComponent.apply(this, arguments);
     },
     scrollUp: function(event){
      myList = Ext.getCmp('myList');
      thePanel = Ext.getCmp('thePanel');
      myList.fireEvent('scroll',thePanel.scroller,{x:0,y:100});
     }
    });
    Ext.reg('concierge_list', Concierge.List);

  9. #9
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Dave - a few issues:

    - Do not extend and set the ID statically. It completely nullifies usability and goes against OOJS patterns.
    - Do not use Ext.getCmp inside of the class for which the method is attached (scrollUp)
    - You should not fire an event that is not listed as public.


    According to the source code, there is only one place where a 'scroll' event is fired and that's in the *private* _scrollTo method (below). You might want to use the public scrollTo method instead.

    Code:
     /**
         * @private
         * Handles the actual transformation to scroll
         */
        _scrollTo : function(pos) {
            var me = this;
            me.offset = {x: Math.round(pos.x), y: Math.round(pos.y)};
    
            if (!me.preventActualScroll) {
                var style = me.scroller.dom.style;
                style.webkitTransitionDuration = '0ms';        
                style.webkitTransform = me.translateOpen + me.offset.x + 'px, ' + me.offset.y + 'px' + me.translateClose;
    
                if (me.scrollbarX) {
                    me.scrollbarX.scrollTo(me.offset);
                }
    
                if (me.scrollbarY) {
                    me.scrollbarY.scrollTo(me.offset);
                }            
            }
    
            me.fireEvent('scroll', me, me.getOffset());
        },

  10. #10
    Ext JS Premium Member
    Join Date
    Jul 2010
    Posts
    234
    Vote Rating
    1
    DaveC426913 is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    - Do not extend and set the ID statically. It completely nullifies usability and goes against OOJS patterns.
    Right. Good point. I simply added an id as a last-ditch way to ensure I was grabbing the correct object.

    I'm sure there's a better way to write my methods to ensure they reference the correct object within my class. for now though, I'm still just trying to get the components to *work*, never mind writing well-formed code.
    Quote Originally Posted by jgarcia@tdg-i.com View Post
    - Do not use Ext.getCmp inside of the class for which the method is attached (scrollUp)
    As above.
    Quote Originally Posted by jgarcia@tdg-i.com View Post
    - You should not fire an event that is not listed as public.
    Well then what should I do?

    It seems the documentation is a bit behind the source code. Many methods for example are not in the docs. With no examples either, I have little choice but to wing it.

    Quote Originally Posted by jgarcia@tdg-i.com View Post
    According to the source code, there is only one place where a 'scroll' event is fired and that's in the *private* _scrollTo method (below). You might want to use the public scrollTo method instead.
    ...which is not documented...

Similar Threads

  1. Sencha Touch with Rhodes
    By sumisha in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 29 Apr 2012, 11:47 PM
  2. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  3. charting in sencha touch
    By fgeorge in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 9 Jul 2010, 12:34 AM

Thread Participants: 4