Results 1 to 5 of 5

Thread: Ext.grid.Panel with a CellEditingPlugin

  1. #1
    Sencha User
    Join Date
    Jan 2016
    Posts
    6
    Answers
    1

    Default Answered: Ext.grid.Panel with a CellEditingPlugin

    There is any way to put an icon on editable cells than it always can see in a div and input. i could try with a CellTpl, but the point is, i have no way to identify the editor cells and the none editable cells. Any idea?
    I use it to do in the col, a dirty way

    header: 'Light <span class="icon-mode-edit"></span>',

    Can i modify it with tpl and xtype: 'templatecolumn'? I can use datapicker as usual and other cmps? or i should remake the cmp?

    Sorry for my bad English, and thanks

  2. The best way to do it;

    overrride the colum to add cls, call the parent inherit stuff that they do.

    Code:
    Ext.define('your_theme.grid.column.Column', {
        override: 'Ext.grid.column.Column',
        initComponent: function() {
             if(this.config.editor){
                 this.addCls('icon-mode-edit') ;
                 this.tdCls += " icon-mode-edit-cell";
             }
             
             this.callParent(arguments);
        }
    });
    Ones you do it, just modifi the css do add the icon
    Code:
    .icon-mode-edit-cell .x-grid-cell-inner{
                 //your atributes, should be a content to add the icon
    }
     .icon-mode-edit-cell .x-grid-cell-inner:hover{
                  //your atributes, should be a content to add the icon
    }

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Are you trying to add an icon to the editable cells or to the column header?

  4. #3
    Sencha User
    Join Date
    Jan 2016
    Posts
    6
    Answers
    1

    Default

    Both, fix on the col and on hover selector of the editable cell

    I think in overwrite and put a class, but i guess there is a easier way.

    Thanks

  5. #4
    Sencha User
    Join Date
    Jan 2016
    Posts
    6
    Answers
    1

    Default header icon solved

    I find a style solucion to the header;

    Code:
     .icon-class-name .x-column-header-text > span:after{ 
         content: "place your content";
         padding: 8px; // if it needed
     }
    and for each edit col header use it, or build a cmp and call it as a xtype;
    Code:
    columns: [{
                    header: 'Common Name',
                    dataIndex: 'common ' ,
                    cls: 'icon-class-name', //if editable plugin
                    flex: 1,
                    width: 130,
                    editor: {
                        allowBlank: false
                    }
    Still working on a solution for the cell, but i think best way will be overwrite the ext class that render the table, if someone has better way please let me know.

  6. #5
    Sencha User
    Join Date
    Jan 2016
    Posts
    6
    Answers
    1

    Default Solved

    The best way to do it;

    overrride the colum to add cls, call the parent inherit stuff that they do.

    Code:
    Ext.define('your_theme.grid.column.Column', {
        override: 'Ext.grid.column.Column',
        initComponent: function() {
             if(this.config.editor){
                 this.addCls('icon-mode-edit') ;
                 this.tdCls += " icon-mode-edit-cell";
             }
             
             this.callParent(arguments);
        }
    });
    Ones you do it, just modifi the css do add the icon
    Code:
    .icon-mode-edit-cell .x-grid-cell-inner{
                 //your atributes, should be a content to add the icon
    }
     .icon-mode-edit-cell .x-grid-cell-inner:hover{
                  //your atributes, should be a content to add the icon
    }

Similar Threads

  1. Grid panel jump to start of the panel when i click on any row of the Grid
    By srautpyaa in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 7 May 2014, 4:29 AM
  2. Problemswith encoding in CellEditingPlugin
    By fletchergirl in forum Ext: Q&A
    Replies: 2
    Last Post: 24 Jun 2013, 11:56 AM
  3. Replies: 2
    Last Post: 9 Aug 2012, 9:38 PM
  4. Replies: 1
    Last Post: 4 Apr 2012, 5:43 AM
  5. Replies: 0
    Last Post: 17 Sep 2010, 3:40 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •