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?

  7. #7
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46
    Vote Rating
    0
    ziesemer is on a distinguished road

      0  

    Default


    See also:
    If re-enabling the "selectable" functionality is so difficult after being made unselectable by default, why can't this be made optional, or default to being selectable?

    Are there any known issues with having selectable grids? Why disable the ability for a user to do a clipboard copy?

  8. #8
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46
    Vote Rating
    0
    ziesemer is on a distinguished road

      0  

    Exclamation Improvements...

    Improvements...


    Thanks to vicwin for the helpful hints, but I have a few follow-up items:

    • Setting overflow:visible on .x-grid3-hd-inner appears to do nothing helpful, but instead throws off the column alignments. (Mostly because Ext is using separate HTML tables to represent each row, instead of one continuous table.)
    • Seeing overflow:visible on .x-grid3-cell-inner does appear to help Firefox consistently allow portions or all of multiple cells to be selected, this property also throws off the column alignments. I did find that at least under Firefox 2.0.0.13, the multiple-cell type selection is still possible even without this setting, but is hard to achieve consistently.
    • Using "-moz-user-select:all;" is almost as bad as no selection at all, as it prevents partial selections. I found setting "-moz-user-select:inherit;" is apparently the best way of effectively resetting the value. See ahttp://zenit.senecac.on.ca/wiki/inde...OZ-USER-SELECT for details of the various values.

    At least for Firefox, the most effective and efficient way to apply these changes is to just add a stylesheet entry after importing Ext's CSS. This may still need some tuning, but seems to reverse all the "-moz-user-select" attributes that Ext is forcing into our pages:
    Code:
    .x-grid3-row td,
    .x-grid3-summary-row td,
    .x-grid3-cell-text,
    .x-grid3-hd-text,
    .x-grid3-hd,
    .x-grid3-row {
    	-moz-user-select:inherit;
    	-khtml-user-select:text;
    }
    As for Internet Explorer, vicwin's approach still appears to be the best bet, though I think that the attribute could actually be removed instead of being set to "off".

    rebe: Just include vicwin's method as a JavaScript method somewhere in your page. Then call it, passing in the variable of the Grid that you want to adjust.

    Alternatively, the "cell" and "hcell" Ext.Template's defined in GridView.js could probably be edited at runtime to omit ever inserting the unselectable attribute. These are being stored on a "templates" property of the GridView. Unfortunately, none of it is described in the documentation, and there are "// private" comments all over the place in the code, so doing so would probably be prone to breaking in a future Ext release.

    The best approach would be for the Ext team to get involved and either remove these disabling attributes unless they are required as a fix for another issues, or at least provide a method to make them optional, possibly as a config option to GridView (and factoring out the CSS attributes into a separate class that could be added, dependent upon the config option).

  9. #9
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46
    Vote Rating
    0
    ziesemer is on a distinguished road

      0  

    Post Modified IE code

    Modified IE code


    See my last post for fixing text selection under Firefox. This is my improved version of vicwin's code for IE:

    Code:
    /**
     * http://extjs.com/forum/showthread.php?t=22218
     * For non-IE browsers, this is fixed with a CSS addition.
     * @param {Ext.grid.GridPanel} grid The GridPanel to fix.
     */
    var reenableTextSelection = function(grid){
    	if(Ext.isIE){
    		grid.store.on("load", function(){
    			var elems=Ext.DomQuery.select("div[unselectable=on]", grid.dom);
    			for(var i=0, len=elems.length; i<len; i++){
    				elems[i].unselectable = "off";
    			}
    		});
    	}
    };
    It properly caches the length property. More importantly, it runs after the grid loads, allowing it to update all rows, and it does so after additional loads as well.

  10. #10
    dandvd
    Guest

    Question Select text in grid to copy to clipboard

    Select text in grid to copy to clipboard


    As soon as my users used a grid, they wanted to copy data (avoiding having to type long serial numbers, or pasting it in Excel etc.). So I looked at the API... couldn't find anything to allow the user to select text from the grid. Then I turned to the forums. Seems we have 6 threads already about making grid data selectable for copying to the clipboard:
    There are also 3 more threads asking how to copy text from the grid:
    (and these are only the threads I could find... the forum's search function is okay but not exactly stellar)

    Quote Originally Posted by ziesemer View Post
    If re-enabling the "selectable" functionality is so difficult after being made unselectable by default, why can't this be made optional, or default to being selectable?

    Are there any known issues with having selectable grids? Why disable the ability for a user to do a clipboard copy?
    Looks like there's a lot of demand for the text in grids to be selectable. Jack/ExtJs team, why not make this either the default or a clear option? dojo's grid is fugly, but text is selectable.

    Dan

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..."