1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    12
    Vote Rating
    0
    sladapter is on a distinguished road

      0  

    Default How to select Text in Grid.Panel

    How to select Text in Grid.Panel


    How to select text in a Grid.Panel? None of the text in Grid Panel seems to be selectable including the data in grid cells, column header or panel Title. How do we copy some data if they are not selectable?

    If I set selType to 'rowmodel' and use RowEditing plugin to edit data, I can select text in the Text Field, but it only works in Chrome and Safari, not in IE and Firefox. Without the ability to select text in edit mode we can't delete the whole value in the input box which is very annoying.

    Are those bugs?

    I'm using ExtJs 4.

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    12
    Vote Rating
    0
    sladapter is on a distinguished road

      0  

    Default


    bump

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Prague
    Posts
    38
    Vote Rating
    0
    cubernatic is on a distinguished road

      0  

    Default


    Can not be.
    I use also roweditor plugin and I can select everything I specified to be editable and change the value.

    May you have an misstake in your source. Best you show us your source.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    12
    Vote Rating
    0
    sladapter is on a distinguished road

      0  

    Default


    I use also roweditor plugin and I can select everything I specified to be editable and change the value.
    In which browser? Can you do it in IE and Firefox? As I said, I can do it in Chrome and Safari, but not is FF and IE.

    Here is my Grid code:

    Ext.define('MyApp.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',
    store: 'Users',
    columns: [
    { header: 'ID', dataIndex: 'id', flex: 1 },
    { header: 'Name', dataIndex: 'name', flex: 1, field: 'textfield' },
    { header: 'Email', dataIndex: 'email', flex: 1, xtype: 'templatecolumn', tpl: '<a href="mailto:{email}">{email}</a>', field: 'textfield' }
    ],
    selType: 'rowmodel',
    plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 3
    })
    ],
    dockedItems: [{
    xtype: 'pagingtoolbar',
    store: 'Users', // same store GridPanel is using
    dock: 'bottom',
    displayInfo: true
    }]
    });

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    Prague
    Posts
    38
    Vote Rating
    0
    cubernatic is on a distinguished road

      0  

    Default


    Seems all right on your source.

    Yes my rowEdit works on chrome 12, firefox 5 , opera 11, safari 5 and IE9.

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Location
    Prague
    Posts
    38
    Vote Rating
    0
    cubernatic is on a distinguished road

      0  

    Default


    Here is my source, may it help you:
    Code:
    Ext.define('XTM.view.tax.rates.Grid' ,{
        extend: 'Ext.grid.Panel',
        alias : 'widget.taxratesgrid',
        
        store : 'Taxrates',
        border: false,
        
        columns: [{
            header:     'Zone',
            dataIndex:  'tax_zone_id',
            flex:       1,
            sortable:   true,
            hidden:     false,
            field: {
                xtype: 'combobox',
                typeAhead: true,
                triggerAction: 'all',
                selectOnTab: true,
                store: 'Systemstatus',
                displayField: 'status_name',
                valueField: 'status_id',
                queryMode: 'remote',
                emptyText: 'Zone auswählen'
            }
        },{
            header:     'Rate',  
            dataIndex:  'tax_rate',  
            flex:       1,
            sortable:   true,
            hidden:     false,
            field: {
                type: 'numberfield'
            },
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 0,
                maxValue: 100
            }
        }],
    
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            items: [{
                text: 'Add',
                iconCls: 'icon-add',
                disabled: false,
                action: 'add'
            }, {
                text: 'Delete',
                iconCls: 'icon-delete',
                disabled: true,
                action: 'delete'
            }]
        }],
    
        initComponent: function() {
            this.editing = Ext.create('Ext.grid.plugin.RowEditing');
    
            Ext.apply(this, {
               plugins: [this.editing]
               
            });
            this.callParent(arguments);
        }
    });

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    12
    Vote Rating
    0
    sladapter is on a distinguished road

      0  

    Default


    cubernate,

    Could you run the following code to see what is wrong?

    Code:
        <link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="ext-js/ext-all-debug.js" type="text/javascript"></script> 
    <script>
    Ext.define('UserData', {
        extend: 'Ext.data.Model',
        fields: [
                { name: 'id', type: 'int' },
                { name: 'name', type: 'string' },
                { name: 'email', type: 'string' }
            ]
    });
    
    var Users = new Ext.data.Store({
        model: 'UserData',
        data: [{ id: 1, name: 'User 1', email: "User1@Test.com" },
               { id: 2, name: 'User 2', email: "User2@Test.com" },
               { id: 3, name: 'User 3', email: "User3@Test.com" }
        ]           
    });
    
    Ext.define('MyApp.List', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.userlist',
        title: 'All Users',
        store: Users,
        columns: [        
            { header: 'ID', dataIndex: 'id', flex: 1 },
            { header: 'Name', dataIndex: 'name', flex: 1, field: 'textfield' },
            { header: 'Email', dataIndex: 'email', flex: 1, xtype:  'templatecolumn', tpl: '<a  href="mailto:{email}">{email}</a>', field: 'textfield' }
        ],
        selType: 'rowmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 1
            })
        ]           
    });
    
    Ext.onReady(function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            renderTo: Ext.getBody(),
            items: [
                {
                    xtype: 'userlist'
                }
            ]
        });
    });
    </script>

  8. #8
    Sencha User
    Join Date
    Jun 2011
    Location
    Prague
    Posts
    38
    Vote Rating
    0
    cubernatic is on a distinguished road

      0  

    Default


    Sorry but I have no time, to much to do.

  9. #9
    Sencha User
    Join Date
    Jun 2011
    Posts
    12
    Vote Rating
    0
    sladapter is on a distinguished road

      0  

    Default


    Here is my source, may it help you:
    Tried your code, it doesn't work in IE9 and FF5 either.

    Do you use other style file(other than ext-all.css) for IE and FF?

  10. #10
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    hwang0 is on a distinguished road

      0  

    Default


    if you have jquery, try this:
    $('*').removeClass("x-unselectable")

Thread Participants: 2

Tags for this Thread