Hybrid View

  1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
    vicwin is on a distinguished road

      0  

    Default Text Selections in Grid cell

    Text Selections in Grid cell


    The EXt JS Grid is great!
    i want to make the text selectable in cell, just like Excell or Google Spreadsheet. does any one know how to do it?

    Thanks

  2. #2
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    20
    Vote Rating
    0
    Yendor is on a distinguished road

      0  

    Default


    Do you perhaps want an editable grid? Check out the example at http://extjs.com/deploy/dev/examples...edit-grid.html

    -Yendor

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
    vicwin is on a distinguished road

      0  

    Default


    similar, but not the way i want it to be. the text should not be editable, and i should be able to select across multiple cells/rows, kind of like the basic HTML table.
    is any body done it before using the EXT grid?
    Thanks!

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    11
    Vote Rating
    0
    vicwin is on a distinguished road

      0  

    Default


    well, after one afternoon of diving into the source code.
    I found a way to let user select(enable copy/paste) text in the grid.
    EXT JS control the text selection ability from CSS.
    These is the key CSS style need to change to enable text selection
    From:
    x-grid3-hd {... "-moz-user-select:none"}
    x-grid3-hd-inner {... "overflow:hidden"}
    x-grid3-cell-inner {... "overflow:hidden"}
    x-grid3-row { ..."-moz-user-select:none"}

    To:
    x-grid3-hd {... "-moz-user-select:all"}
    x-grid3-hd-inner {... "overflow:visible"}
    x-grid3-cell-inner {... "overflow:visible"}
    x-grid3-row {..."-moz-user-select:all"}

    The Javascript code to do that
    Code:
    function enableTextSelection(grid)
    		{
    			//enable text selection in IE
    			if (Ext.isIE)
    			{
    				var elms=Ext.DomQuery.select("div[unselectable=on]",grid.dom);
    				for (i=0; i<elms.length;i++)
    				{
    					elms[i].unselectable="off";
    				}
    			}
    			else //any other browser, prmiary Firefox
    			{
    
    				var elms_h=Ext.DomQuery.select("div[class*=x-grid3-hd-inner]{overflow=hidden}",grid.dom)
    				
    				var elms_1=Ext.DomQuery.select("div[class*=x-grid3-cell-inner]{overflow=hidden}",grid.dom)
    				var elms_2=Ext.DomQuery.select("*{-moz-user-select=none}",grid.dom)
    				for (i=0; i<elms_h.length;i++)
    				{
    					elms_h[i].style.overflow="visible";
    				}
    				for (i=0; i<elms_1.length;i++)
    				{
    					elms_1[i].style.overflow="visible";
    				}
    				for (i=0; i<elms_2.length;i++)
    				{
    					elms_2[i].style["MozUserSelect"]="all";
    				}
    
    			}
    
    		}
    Hope it will help people who need to copy data from the grid

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    rebe is on a distinguished road

      0  

    Default


    I try to use this function, enableTextSelection(grid), but I don't know where to place it, and what variable name use instead of grid.

    Can someone help me?

  6. #6
    Sencha User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    rebe is on a distinguished road

      0  

    Default


    Nobody can help me?