1. #41
    Sencha User
    Join Date
    Feb 2010
    Posts
    27
    Vote Rating
    1
    webxells is on a distinguished road

      0  

    Default


    You guessed it:

    PHP Code:
    //If no component is defined
                    
    if (component == undefined) {
                      continue;
                    } 

  2. #42
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    JSLint doesn't like that. You should write:
    Code:
    if (!component) {
      continue;
    }

  3. #43
    Sencha User
    Join Date
    Feb 2010
    Posts
    27
    Vote Rating
    1
    webxells is on a distinguished road

      0  

    Default


    Is it possible to insert more than one component, like

    var tpl_Template = new Ext.XTemplate(
    '<tpl for=".">',

    '<h1>{title}</h1>',

    '<div class="btnEdit"></div>',

    '<div class="more things">',

    '<tpl for="comments">',
    '<span class="date">{creation_date} {user_name}</span>',
    '<p>{content}</p>',

    '<div class="btnCommentEdit"></div>',

    '</tpl>',
    '</div>',

    '</tpl>',
    );

    tpl_Template .compile();


    var btnEdit= {
    text : 'Edit',
    xtype: 'button',
    width: '125',
    iconCls : 'IconKommentarBearbeiten',
    renderTarget: 'div.btnEdit',
    handler : function() {

    }
    }

    ...

    xtype : 'complistview',

    ...

    columns : [
    {
    xtype: 'lvcolumn',
    header: 'Something',
    dataIndex: 'temp',
    tpl : tpl_Template,
    component: [btnEdit, btnCommentEdit, btnSomething]
    }
    ]


    If I run this, there will only one textfield. But i.e. "btnCommentEdit" exists more than once.

  4. #44
    Sencha User
    Join Date
    Feb 2010
    Posts
    27
    Vote Rating
    1
    webxells is on a distinguished road

      0  

    Default


    OK, I tried to find a solution for this:

    PHP Code:
        renderItems : function(startIndexendIndex){
            var 
    ns this.all.elements;
            var 
    args = [startIndex0];
            for(var 
    startIndex<= endIndexi++){
                var 
    args[args.length] = [];
                for(var 
    columns this.columns0len columns.lengthclenj++){
                    var 
    component columns[j].component;

                    
    //If no component is defined
                    
    if (!component) {
                      continue;
                    }
                    
                    if (
    component.length 1) {
                      var 
    components component;
                      for (var 
    0components.lengthk++) {
                        var 
    component components[k];
                    
                        
    component.render ?
                            
    component.cloneConfig() :
                            
    Ext.create(componentthis.defaultType);
                        
    r[j] = c;
                        var 
    node ns[i].getElementsByTagName('dt')[j].firstChild;
                        if(
    c.renderTarget){
                            
                            
    //If no renderTarget was found - prevent errors
                            
    if (Ext.DomQuery.selectNode(c.renderTargetnode)) {
                              
    c.render(Ext.DomQuery.selectNode(c.renderTargetnode));
                            }
                            
                        }else if(
    c.applyTarget){
                            
    c.applyToMarkup(Ext.DomQuery.selectNode(c.applyTargetnode));
                        }else{
                            
    c.render(node);
                        }
                        if(
    c.applyValue === true){
                            
    c.applyValue columns[j].dataIndex;
                        }
                        if(
    Ext.isFunction(c.setValue) && c.applyValue){
                            
    c.setValue(this.store.getAt(i).get(c.applyValue));
                            
    c.on('blur', function(f){
                                
    this.store.getAt(this.index).data[this.dataIndex] = f.getValue();
                            }, {
    storethis.storeindexidataIndexc.applyValue});
                        }
                        
                      }
                    } else {
                    
                        
    component.render ?
                            
    component.cloneConfig() :
                            
    Ext.create(componentthis.defaultType);
                        
    r[j] = c;
                        var 
    node ns[i].getElementsByTagName('dt')[j].firstChild;
                        if(
    c.renderTarget){
                            
                            
    //If no renderTarget was found - prevent errors
                            
    if (Ext.DomQuery.selectNode(c.renderTargetnode)) {
                              
    c.render(Ext.DomQuery.selectNode(c.renderTargetnode));
                            }
                            
                        }else if(
    c.applyTarget){
                            
    c.applyToMarkup(Ext.DomQuery.selectNode(c.applyTargetnode));
                        }else{
                            
    c.render(node);
                        }
                        if(
    c.applyValue === true){
                            
    c.applyValue columns[j].dataIndex;
                        }
                        if(
    Ext.isFunction(c.setValue) && c.applyValue){
                            
    c.setValue(this.store.getAt(i).get(c.applyValue));
                            
    c.on('blur', function(f){
                                
    this.store.getAt(this.index).data[this.dataIndex] = f.getValue();
                            }, {
    storethis.storeindexidataIndexc.applyValue});
                        }
                      
                    }
                
                }
            }
            
    this.components.splice.apply(this.componentsargs);
        }, 
    It is useful. Can it be more smarter?

  5. #45
    Sencha User
    Join Date
    Jan 2009
    Posts
    61
    Vote Rating
    1
    bartonjd is on a distinguished road

      0  

    Default TabPanel Template

    TabPanel Template


    I was playing around with your code Condor and couldn't quite get it to do what I needed so I have written this extension which is somewhat similar in nature. This extension lets the user define a template item for a tabpanel and then the template is used to build tabs for the tabpanel out of the store.

    CODE WITH EXAMPLE:
    Code:
    Ext.ns('Ext.ux');
    Ext.ux.TplTabPanel = Ext.extend(Ext.TabPanel, {
        initComponent: function () {
            //Ext.apply(this,{store:this.store});
            Ext.ux.TplTabPanel.superclass.initComponent.apply(this, arguments);
    
            var tb = this;
            var itemArr = [];
    
            var cnt = tb.store.getCount();
    
            Ext.each(this.tabsTpl, function (j) {
                for (var i = 0; i < tb.store.getCount(); i++) {
    
    
                    var c = j.render ? c = j.cloneConfig() : Ext.ComponentMgr.create(j);
    
    
                    function myfn() {
                        Ext.apply(this, tb.store.getAt(i).get(this.applyValues));
                    }
                    c.cascade(myfn);
                    Ext.ComponentMgr.register(c);
    
                    tb.items.add(c.id, c);
    
                }
            });
    
        },
    });
    Ext.reg('tabtpl', Ext.ux.TplTabPanel);
    
    
    Ext.onReady(function () {
        new Ext.Viewport({
            layout: 'hbox',
            layoutConfig: {
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: new Ext.ux.TplTabPanel({
                id: 'climate_panel',
                activeTab: 0,
                store: new Ext.data.JsonStore({
                    storeId: 'weather',
                    data: [{
                        id: 'raw',
                        panel: {
                            title: 'Raw',
                            id: 'rawfield'
                        },
                        fieldset: {
                            title: 'Observed',
                            id: 'observed'
                        },
                        checks: {
                            items: [{
                                boxLabel: 'Precipitation',
                                id: 'chk1'
                            },
                            {
                                boxLabel: 'Temperature',
                                id: 'chk2'
                            }]
                        }
                    },
                    {
                        id: 'hourly',
                        panel: {
                            title: 'Hourly',
                            id: 'hourfield'
                        },
                        fieldset: {
                            title: 'Observed Hourly',
                            id: 'observed_hourly'
                        },
                        checks: {
                            items: [{
                                boxLabel: 'Altimeter'
                            },
                            {
                                boxLabel: 'Visibility'
                            }]
                        }
                    }],
                    fields: ['panel', 'title', 'id', 'cn', 'value', 'checks', 'fieldset', 'boxLabel', 'items'],
    
                }),
                tabsTpl: {
                    xtype: 'panel',
                    layout: 'form',
                    applyValues: 'panel',
                    items: {
                        xtype: 'fieldset',
    
    
                        applyValues: 'fieldset',
                        items: {
                            xtype: 'checkboxgroup',
                            //items:[],
                            applyValues: 'checks'
                        }
                    }
                }
            })
    
    
        });
    });
    Last edited by bartonjd; 6 Jul 2010 at 4:56 PM. Reason: removed unnecessary code

  6. #46
    Sencha User
    Join Date
    Feb 2010
    Posts
    27
    Vote Rating
    1
    webxells is on a distinguished road

      1  

    Default


    Hello,

    if someone comes to the point, to add more than one button in the list by using the renderTarget property, here is a solution:

    PHP Code:
    Ext.ux.ComponentListView Ext.extend(Ext.ListView, {
        
    defaultType'textfield',
        
    initComponent : function(){
            
    Ext.ux.ComponentListView.superclass.initComponent.call(this);
            
    this.components = [];
        },
        
    refresh : function(){
            
    Ext.destroy(this.components);
            
    this.components = [];
            
    Ext.ux.ComponentListView.superclass.refresh.apply(thisarguments);
            
    this.renderItems(0this.store.getCount() - 1);
        },
        
    onUpdate : function(dsrecord){
            var 
    index ds.indexOf(record);
            if(
    index > -1){
                
    this.destroyItems(index);
            }
            
    Ext.ux.ComponentListView.superclass.onUpdate.apply(thisarguments);
            if(
    index > -1){
                
    this.renderItems(indexindex);
            }
        },
        
    onAdd : function(dsrecordsindex){
            var 
    count this.all.getCount();
            
    Ext.ux.ComponentListView.superclass.onAdd.apply(thisarguments);
            if(
    count !== 0){
                
    this.renderItems(indexindex records.length 1);
            }
        },
        
    onRemove : function(dsrecordindex){
            
    this.destroyItems(index);
            
    Ext.ux.ComponentListView.superclass.onRemove.apply(thisarguments);
        },
    /**
     * Workarround, um einen Destroy Fehler zu vermeiden 
     * Quelle: http://www.sencha.com/forum/showthread.php?79210-ComponentDataView-Ext-components-inside-a-dataview-or-listview
     */

        
    onDestroy : function(){
            
    Ext.ux.ComponentListView.superclass.onDestroy.call(this);
            
    Ext.destroy(this.components);
            
    this.components = [];
        },
        
    renderItems : function(startIndexendIndex){
            var 
    ns this.all.elements;
            var 
    args = [startIndex0];
            for(var 
    startIndex<= endIndexi++){
                var 
    args[args.length] = [];
                for(var 
    columns this.columns0len columns.lengthclenj++){
                    var 
    component columns[j].component;

                    
    //If no component is defined
                    
    if (!component) {
                      continue;
                    }
                   
                    if (
    component.length 1) {
                      var 
    components component;
                      for (var 
    0components.lengthk++) {
                        var 
    component components[k];
                    
                        
    component.render ?
                            
    component.cloneConfig() :
                            
    Ext.create(componentthis.defaultType);
                        
    r[j] = c;
                        var 
    node ns[i].getElementsByTagName('dt')[j].firstChild;
                        if(
    c.renderTarget){
                            
                            
    //If no renderTarget was found - prevent errors
                            
    if (Ext.DomQuery.jsSelect(c.renderTargetnode)) {
                              
    //c.render(Ext.DomQuery.selectNode(c.renderTarget, node));
                              
    var elm Ext.DomQuery.jsSelect(c.renderTargetnode);
                              
    Ext.each(elm, function(item) {
                                  var 
    nextEl c.cloneConfig();
                                  
    nextEl.render(item);
                              })
                            }

                            
    /*if (Ext.DomQuery.selectNode(c.renderTarget, node)) {
                              c.render(Ext.DomQuery.selectNode(c.renderTarget, node));
                            }*/
                            
                        
    }else if(c.applyTarget){
                            
    c.applyToMarkup(Ext.DomQuery.selectNode(c.applyTargetnode));
                        }else{
                            
    c.render(node);
                        }
                        if(
    c.applyValue === true){
                            
    c.applyValue columns[j].dataIndex;
                        }
                        if(
    Ext.isFunction(c.setValue) && c.applyValue){
                            
    c.setValue(this.store.getAt(i).get(c.applyValue));
                            
    c.on('blur', function(f){
                                
    this.store.getAt(this.index).data[this.dataIndex] = f.getValue();
                            }, {
    storethis.storeindexidataIndexc.applyValue});
                        }
                        
                      }
                    } else {
                    
                        
    component.render ?
                            
    component.cloneConfig() :
                            
    Ext.create(componentthis.defaultType);
                        
    r[j] = c;
                        var 
    node ns[i].getElementsByTagName('dt')[j].firstChild;
                        if(
    c.renderTarget){
                            
                            
    //If no renderTarget was found - prevent errors
                            
    if (Ext.DomQuery.selectNode(c.renderTargetnode)) {
                              
    c.render(Ext.DomQuery.selectNode(c.renderTargetnode));
                            }
                            
                        }else if(
    c.applyTarget){
                            
    c.applyToMarkup(Ext.DomQuery.selectNode(c.applyTargetnode));
                        }else{
                            
    c.render(node);
                        }
                        if(
    c.applyValue === true){
                            
    c.applyValue columns[j].dataIndex;
                        }
                        if(
    Ext.isFunction(c.setValue) && c.applyValue){
                            
    c.setValue(this.store.getAt(i).get(c.applyValue));
                            
    c.on('blur', function(f){
                                
    this.store.getAt(this.index).data[this.dataIndex] = f.getValue();
                            }, {
    storethis.storeindexidataIndexc.applyValue});
                        }
                      
                    }
                
                }
            }
            
    this.components.splice.apply(this.componentsargs);
        },
        
    destroyItems : function(index){
            
    Ext.destroy(this.components[index]);
            
    this.components.splice(index1);
        }
    });
    Ext.reg('complistview'Ext.ux.ComponentListView); 
    The part:

    PHP Code:
                            
                            
    //If no renderTarget was found - prevent errors
                            
    if (Ext.DomQuery.jsSelect(c.renderTargetnode)) {
                              var 
    elm Ext.DomQuery.jsSelect(c.renderTargetnode);
                              
    Ext.each(elm, function(item) {
                                  var 
    nextEl c.cloneConfig();
                                  
    nextEl.render(item);
                              })
                            } 
    Clones the button, so you can use it more than one time.

  7. #47
    Sencha User
    Join Date
    Mar 2007
    Posts
    210
    Vote Rating
    1
    KRavEN is on a distinguished road

      0  

    Default


    Thanks for this Condor. For anyone wanting to add Ext.ux.RowActions type functionality to a ListView here is an example:

    PHP Code:
    new Ext.ux.ComponentListView({
      
    store lbStore,
      
    autoHeight true,
      
    emptyText 'No VIP\'s to display',
      
    columns : [{
        
    header 'VIP',
        
    dataIndex 'lb'
      
    }, {
        
    header 'VIP Port',
        
    dataIndex 'lb_port'
      
    }, {
        
    header '&nbsp;',
        
    component : {
          
    xtype 'box',
          
    autoEl: {
              
    tag'img',
              
    src'/images/del-icon.png',
              
    cls'row-action-del'
          
    }
        }
      }],
      
    listeners: {
          
    click : {
              
    fn: function(viewindexnodee)    {
                  var 
    el Ext.get(e.target);
                  if(
    el.hasClass('row-action-del'))
                  {
                      var 
    record view.getRecord(node);
                      
    view.getStore().remove(record);                  
                  }
              }
          }
      }
    }); 
    This needs the renderItems change from earlier in this thread
    PHP Code:
            // If no component is defined
            
    if (!component) {
              continue;
            } 

  8. #48
    Sencha User
    Join Date
    Jul 2010
    Posts
    6
    Vote Rating
    0
    base698 is on a distinguished road

      0  

    Default


    I have a control that extends CustomDataView. The data in the control is about 200 records. It consists of a checkbox and a label. The control takes around 900 milliseconds for the renderItems function to load. It would be very nice if I could get that down to a more acceptable level.

    Thanks,

    Justin

  9. #49
    Sencha User
    Join Date
    Jul 2010
    Posts
    6
    Vote Rating
    0
    base698 is on a distinguished road

      0  

    Default


    I meant ComponenetDataView.

  10. #50
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Do you actually need Ext components, or could you just render HTML <label> and <input> elements in a normal DataView?