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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar