Results 1 to 7 of 7

Thread: Textbox on a Grid

  1. #1
    Sencha User
    Join Date
    May 2012
    Location
    Nowhere
    Posts
    45
    Vote Rating
    1
      0  

    Default Answered: Textbox on a Grid

    I want to know how to make a textbox column in a grid.

    Thanks,
    - Sadd

  2. You can have a look at Component Column where items are visible by default:
    http://skirtlesden.com/ux/component-column

    Scott.

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    8
      0  

    Default

    What exactly do you want? Editable field on the grid or cell tooltip.

  4. #3
    Sencha User
    Join Date
    May 2012
    Location
    Nowhere
    Posts
    45
    Vote Rating
    1
      0  

    Default

    Exactly what i want is view a column like it displays when you click in the column with a editor with xtype: 'textbox'.

  5. #4
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124
    Vote Rating
    93
      0  

    Default

    Hi,

    You can try following code:

    Code:
    
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
            {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
            {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
            {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
     
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    Click on first colum then it will change into a textfield

    In Extjs 4.x use these two propeties

    Code:
    
    selType: 'cellmodel',            // you can use rowmodelplugins: [  Ext.create('Ext.grid.plugin.CellEditing', {     // Ext.grid.plugin.RowEditing
                clicksToEdit: 1        })    ]
    For make any column textfield or another ext component use editor config for perticular columns
    Code:
    
     {header: 'Name',  dataIndex: 'name', editor: 'textfield'}
    for more details see this link: http://docs.sencha.com/ext-js/4-1/#!...in.CellEditing
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  6. #5
    Sencha User
    Join Date
    May 2012
    Location
    Nowhere
    Posts
    45
    Vote Rating
    1
      0  

    Default

    Yes this works fine, but i'm looking to have the view of editor by deafult not display the textfield when you click on an element in the column with editor, just have a textfield column which looks equals to the editor view and when you click on it this doesn't change to a textfield.

  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    You can have a look at Component Column where items are visible by default:
    http://skirtlesden.com/ux/component-column

    Scott.

  8. #7
    Sencha User
    Join Date
    May 2012
    Location
    Nowhere
    Posts
    45
    Vote Rating
    1
      0  

    Default

    That looks like what i want. Thanks Scott

Posting Permissions

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