1. #1
    Sencha User castitas's Avatar
    Join Date
    Sep 2011
    Location
    US
    Posts
    116
    Vote Rating
    3
    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
    9,083
    Vote Rating
    467
    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
    975
    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