Results 1 to 4 of 4

Thread: Ext.view.View use templates

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    63
    Answers
    5
    Vote Rating
    4
      0  

    Post Answered: Ext.view.View use templates

    Hello,

    i have a dataview with defined tpl. This dataview shows desktop with icons and on resize icons can regrouped in two or more columns. This serves onResize event. It works ok but seems like after resize and applying template the dataview loose connection with datastore; on item click it rise error
    Code:
    o is undefined
    return o.id;
    and i find in FireBug that dataview.all.elements no more points to their DOM elements after overwrite tpl. If no resize acts all work perfect.
    Can anybody help me to solve this issue and may be after tpl.overwrite() I must smth like rebind data to dataview

    Code:
                        resize: function(dataview, adjWidth, adjHeight){
                            dataview.tpl.col_length = parseInt(adjHeight/110);
                            var data = [];
                            for(i in dataview.store.data.items){
                                data = data.concat(dataview.store.data.items[i].data);
                            }
                            dataview.tpl.overwrite(dataview.el.dom,data);
                        }
    Code:
                var maindataview = Ext.create('Ext.view.View', {
                    border: false,
                    store: store,
                    parent: this,
    
                    tpl  :  new Ext.XTemplate(
                        '<tpl for=".">',
                            '<tpl if="xindex%this.col_length==1">',
                                '<tpl if="xindex &gt; 1">',
                                    '</ul>',
                                '</tpl>',
                                '<ul class="app_list">',
                            '</tpl>',
                            '<li class="app" id="{name}.icon" data-qtip="{title}" data-qwidth="100">',
                                (!Ext.isIE6? '<img width="48" height="48" src="/static/img/cluster/{class_name}.png" />' :    //{[values.name.replace(/ /g, "-")]}
                                 '<div style="width:48px;height:48px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/static/img/cluster/{class_name}.png\',sizingMethod=\'scale\')"></div>'),
                                '<strong handle = {name}>{title}</strong>',
                            '<tpl if="xindex==xcount">',
                                '</ul>',
                            '</tpl>',
                        '</tpl>',
                        {
                            view_height:700,
                            col_length:5,
                            get_col_len: function(){
                                return 5;
                            }
                        }
                    ),
    
                    id: 'apps',
    
                    itemSelector: '.app',
                    overItemCls : 'app-hover',
                    multiSelect : false,
                    layout: 'fit',
                    listeners:{
                        'itemclick': function(dataview, record, item, index){
                            mainmenu.hide();
                            strong = item.querySelector('strong');
                           sender.load_app(false,strong.attributes['handle'].value,null,null,item.id);
                        },
                        resize: function(dataview, adjWidth, adjHeight){
                            dataview.tpl.col_length = parseInt(adjHeight/110);
                            var data = [];
                            for(i in dataview.store.data.items){
                                data = data.concat(dataview.store.data.items[i].data);
                            }
                            dataview.tpl.overwrite(dataview.el.dom,data);
                        }
                        }
                    });

  2. have you tried just using refresh() on the view?

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    have you tried just using refresh() on the view?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    63
    Answers
    5
    Vote Rating
    4
      0  

    Default

    mitchellsimoens
    have you tried just using refresh() on the view?
    thanks a lot Mitchell! It really do the job, but one more thing. Then i add listener like this,

    Code:
                        resize: function(dataview, adjWidth, adjHeight){
                            dataview.refresh();
                        }
    it rise error on init

    Code:
    too much recursion
    How I can correctly handle the situation on init my components? Look's like it fire resize on init and then refresh() fires resize again

  5. #4
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    63
    Answers
    5
    Vote Rating
    4
      0  

    Default

    well my solution look's like hack) maybe anybody have a better idea?

    Code:
                        resize: function(dataview, adjWidth, adjHeight){
    
                            dataview.tpl.col_length = parseInt(adjHeight/110);
    
                            if(dataview.all.elements.length>0){
                                dataview.refresh();
                            }
                        }
    dataview.tpl.col_length - is a tpl parameter, need refresh after resize

Posting Permissions

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