1. #1
    Sencha User castitas's Avatar
    Join Date
    Sep 2011
    Location
    US
    Posts
    116
    Vote Rating
    2
    castitas is on a distinguished road

      0  

    Default Adding buttons to the roweditor

    Adding buttons to the roweditor


    This post is related to a comment I made on the RowEditor plugin.

    To add buttons to the row editor, you have to overload both the RowEditing plugin and the RowEditor. (Bonus: How to add focus events to every editable field on the roweditor) Modifications have been marked.

    PHP Code:
    Ext.define('sst.util.MyRowEditor',{
        
    extend'Ext.grid.RowEditor',
        
        
    initComponent:function(){
            
    this.callParent(arguments);
        },   
        
    getFloatingButtons: function() {
            var 
    me this,
                
    cssPrefix Ext.baseCSSPrefix,
                
    btnsCss cssPrefix 'grid-row-editor-buttons',
                
    plugin me.editingPlugin,
                
    minWidth Ext.panel.Panel.prototype.minButtonWidth,
                
    btns;

            if (!
    me.floatingButtons) {
                
    btns me.floatingButtons = new Ext.Container({
                    
    /* it is not necessary to save a reference to the editor
                         in the button panel, but I found it useful, since the 
                         editor is not its parent component */
                    
    editorme,  
                    
    renderTpl: [
                        
    '<div class="{baseCls}-ml"></div>',
                        
    '<div class="{baseCls}-mr"></div>',
                        
    '<div class="{baseCls}-bl"></div>',
                        
    '<div class="{baseCls}-br"></div>',
                        
    //I had to add the style width for the buttons to show up
                        
    '<div class="{baseCls}-bc" style="width:230px"></div>'
                        
    '{%this.renderContainer(out,values)%}'
                    
    ],
                    
    width240,  //** you will need to change this **//
                    
    renderTome.el,
                    
    baseClsbtnsCss,
                    
    layout: {
                        
    type'hbox',
                        
    align'middle'
                    
    },
                    
    defaults: {
                        
    flex1,
                        
    margins'0 1 0 1'
                    
    },
                    
    items: [
                        {
                            
    itemId  'update',
                            
    xtype   'button',
                            
    handler plugin.completeEdit,
                            
    scope   plugin,
                            
    text    me.saveBtnText,
                            
    minWidthminWidth,
                            
    disabledme.updateButtonDisabled
                        
    },
                        {
                            
    xtype   'button',
                            
    handler plugin.cancelEdit,
                            
    scope   plugin,
                            
    text    me.cancelBtnText,
                            
    minWidthminWidth
                        
    },
                        { 
    //**I added my buttons here**//
                            
    xtype   'button',
                            
    text    ">",
                            
    handler this.moveValOver,
                            
    scope   me,
                            
    maxWidth22,
                            
    tooltip "Move over one"
                        
    },
                        {
                            
    xtype   'button',
                            
    text    ">>",
                            
    handler this.moveValToEnd,
                            
    scope   me,
                            
    maxWidth22,
                            
    tooltip "Move to the end"
                        
    }
                    ]
                });
                
    // Prevent from bubbling click events to the grid view
                
    me.mon(btns.el, {
                    
    // BrowserBug: Opera 11.01
                    //   causes the view to scroll when a button is focused from mousedown
                    
    mousedownExt.emptyFn,
                    
    clickExt.emptyFn,
                    
    stopEventtrue
                
    });
            }
            
            
    //**Bonus material**//
            // add focus event to each editable field
            // create array of editable fields
                
    var formItems = [];
                var 
    allFormItems this.getForm().getFields().items;
                for (
    i=0i<allFormItems.lengthi++) {
                    var 
    item allFormItems[i];
                    if (
    item.isVisible() && item.xtype != 'displayfield') {
                        
    item.on('focus',this.fieldFocus,item);
                        
    item.on('blur',this.fieldBlur,item);
                        
    item.getEl().on('mousedown',function(){me.fieldClick(item);});
                        
                        var 
    nf document.getElementById(item.getEl().down('input').dom.id);
                        var 
    td Ext.get(nf).dom;
                        
    nf.setAttribute('origClasses',item.getEl().down('input').dom.className);
                        
    td.setAttribute('origClasses',item.getEl().down('input').dom.className);
                        
                        
    formItems.push(item);
                    }
                }
                
    this.editableFields formItems;

            return 
    me.floatingButtons;
        },

        
    moveValOver: function() {
                .....
        },

        
    moveValToEnd: function() {
                .....
        }    
    }); 
    PHP Code:
    Ext.define('sst.util.MyRowEditing', {
        
    extend'Ext.grid.plugin.RowEditing',
        
    alias'plugin.myrowediting',

        
    requires: [
        
    //    'util.MyRRowEditor'
        
    ],
        
    initEditor: function() {
            var 
    me       this,
                
    grid     me.grid,
                
    view     me.view,
                
    headerCt grid.headerCt,
                
    btns     = ['saveBtnText''cancelBtnText''errorsText''dirtyText'],
                
    b,
                
    bLen     btns.length,
                
    edcfg      = {
                    
    autoCancelme.autoCancel,
                    
    errorSummaryme.errorSummary,
                    
    fieldsheaderCt.getGridColumns(),
                    
    hiddentrue,
                    
    viewview,
                    
    // keep a reference...
                    
    editingPluginme,
                    
    renderToview.el//,
                
    },
                
    item;

            
    //Turn button text into items
            
    for (0bLenb++) {
                
    item btns[b];

                if (
    Ext.isDefined(me[item])) { //sometimes errorsText or dirtyText are not defined
                    
    edcfg[item] = me[item];
                }
            }
            return 
    Ext.create('sst.util.MyRowEditor'edcfg); ////This is really the only line you have to change
        
    },
        
        
    //Bonus: I found this to be the most effective way to keep the row editor from appearing
        
    beforeEdit: function() {return !this.disabled;}
        
    }); 
    word

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,910
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thanks for the info.

    Scott.

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    With 4.2.1 this in the editor's config:
    Code:
    renderTo: view.el
    causes a JavaScript error on rendering.

    If remove, seems it is all working.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."