1. #1
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    San Diego, CA
    Posts
    31
    Vote Rating
    0
    DroidIn.net is on a distinguished road

      0  

    Default Execute Ext function from the link in the title

    Execute Ext function from the link in the title


    I'm trying to display a breadcrumb as a title in the title bar of tab panel. Based on the selected tab this breadcrumb changes dynamically and reflects "drill in" hierarchy of the current tab. So it can be "foo", "foo->bar", "foo->bar->buz", etc. If there is more than one step then prior sections became hyperlinks. The complete information about breadcrumb is encapsulated as Ext.model object.
    Now the question: What is the shortest, efficient and most elegant way to pass breadcrumb object into the function when user clicks breadcrumb section?
    The following is a function in the custom BreadcrumbController that adds formatted title:

    Code:
        updateBreadcrumb: function(tabPanel, record) {
            if(record){
                var me = this;
                var type = record.get('type');
                var SEP = ' > ';
                var crumb;
                if (type == 'R_FACTORY') {
                    crumb = record.get('name');
                } else if (type == 'R_JOB') {
                    crumb = '<a id="breadcrumb" href="#">' + record.get('factoryName') + '</a>' + SEP + record.get('name');
                } else { // for other cases we will load breadcrumb data from server
                    crumb = '<i>loading...</i>';
                    me.store.load({
                        scope: this,
                        params: record.raw,
                        callback : function(records, operation, success) {
                            console.log('loaded records');
                            if (success) {
                                var r = records[0];
                                r.set('type', type);
                                me.onBreadcrumbLoadOk(tabPanel, r);
                            } else
                            me.onBreadcrumbLoadFailed(tabPanel);
                        }
                    });
    
    
                } 
                tabPanel.setTitle(crumb);
            }
        },
    If you look at the 2nd "else-if" you will see <a href="#"/> tag. I was trying to do something like <a href="javascript:onClickBreadcrumb(" + Ext.encode(record) + ")"/> but this is pretty ugly and I'm also not sure where to define "onClickBreadcrumb" function? I would prefer to keep it inside BreadcrumbController but how then call it from the href="javascript:?" ?I would not mind recoding the whole breadcrumb as long as it stays in the title on the tab panel. Any suggestions?

  2. #2
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,911
    Vote Rating
    63
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    Why not simply give the breadcrumb link a special class say 'crumb'

    Then have a listener on all a.crumb

    Often I'll add an attribute on my anchor tags like the record id so I can look that up in the click event.

    <a class='crumb' rid='456' href='#'>...</a>
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  3. #3
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    San Diego, CA
    Posts
    31
    Vote Rating
    0
    DroidIn.net is on a distinguished road

      0  

    Default


    In the nutshell that is what I ended up doing. Since the "record" object is the model wrapped around some data my link generation is as follows:
    Code:
       buildLinkFromRecord: function(type, record) {
            var me = this, link;
            if (type) {
                link = '<a href="javascript:void(0)" class="bookmark" data-type="' + type + '" data-rec="' + 
                Ext.htmlEncode(Ext.encode(record.data)) + '">';
            } else {
                link = '<a href="#">';
            }
            return link;
        }
    And then, after the breadcrumb (which contains multiple links) is inserted I do
    Code:
    var bookmarks = Ext.select('*[class=bookmark]');
    if (bookmarks) {
        bookmarks.on('click', function(){
            var type = Ext.htmlDecode(this.getAttribute('data-type'));
            var raw = Ext.htmlDecode(this.getAttribute('data-rec'));
            var data = Ext.JSON.decode(raw);
            var record = Ext.create('QuiApplication.model.BookmarkModel', {'type':type, 'data':data});
            me.application.fireEvent('openReporting',record);
        });
    }
    I was just wondering if there was an easier way to pass model object as a parameter?

Thread Participants: 1

Tags for this Thread