1. #1
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    48
    Vote Rating
    3
    Answers
    4
    mixo is on a distinguished road

      0  

    Post Answered: Ext.view.View use templates

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    Answers
    3573
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    have you tried just using refresh() on the view?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User mixo's Avatar
    Join Date
    Jul 2011
    Location
    Novosibirsk
    Posts
    48
    Vote Rating
    3
    Answers
    4
    mixo is on a distinguished road

      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
    48
    Vote Rating
    3
    Answers
    4
    mixo is on a distinguished road

      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

Thread Participants: 1