1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    9
    Vote Rating
    0
    rajneesh103 is on a distinguished road

      0  

    Default Editable Grid

    Editable Grid


    Hi All,

    I am working on an editable grid where i have the requirement that instead of using Ext Editors, I can use html input element for entering the data. As my input elements are having some custom attributes which are bound to my server side java classes. Can anyone help me in this regard? Any help will do.
    Last edited by mystix; 31 Jul 2007 at 3:23 AM. Reason: moved from general discussions

  2. #2
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    291
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    I dunno have much experience with the editable grid, but I guess a code example of what you want to archieve should enable other users to provide a more specific answer.

    I guess that when you have an id of a cell, you could always add some html of your choice by changing the innerHTML property of that dom element. But you'll have to implement all the other stuff (like handling events etc) by yourself.
    And what's wrong with the given Ext components?

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    9
    Vote Rating
    0
    rajneesh103 is on a distinguished road

      0  

    Default Editable Grid

    Editable Grid


    Quote Originally Posted by Ronaldo View Post
    I dunno have much experience with the editable grid, but I guess a code example of what you want to archieve should enable other users to provide a more specific answer.

    I guess that when you have an id of a cell, you could always add some html of your choice by changing the innerHTML property of that dom element. But you'll have to implement all the other stuff (like handling events etc) by yourself.
    And what's wrong with the given Ext components?
    I have an existing table and trying to change it into extjs editable grid. I am trying to use from-markup.js from ext docs examples to render the table. I am rendering the table perfectly.

    Each of my table cells are having one input field and attached div with it. Actually this input field has ajax autocomplete feature. Attached div is for the purpose of showing the Ajax response. I can't use extjs cell editors because the input field's attributes are bound with server side something like wicket framework does.

    I tried using renderer and giving it the same input field like this:

    Code:
    var headers = table.query("thead span");
    	for (var i = 0, h, t; h = headers[i],t=tr[i]; i++) {
    		var text = h.innerHTML;
    		var name = 'tcol-'+i;
    		
    		var rend;
    		if(t != null)
    		{
    		   rend = "\'"+t.innerHTML+"\'";
    		}
    		else
    		{
    		   rend = '<input type="text" autocomplete="off" value="">';		
    		}
                    alert(rend);
    
            fields.push(Ext.applyIf(cf[i] || {}, {
                name: name,
                mapping: 'td:nth('+(i+1)+')/@innerHTML'
            }));
    
    		cols.push(Ext.applyIf(ch[i] || {}, {
    			'header': text,
    			'dataIndex': name,
    			'width': 100,
    			'tooltip': h.title,
                            'sortable': true,
                            'resizable': false,
                            'renderer':function(){return rend}
            }));
        }
        
        var ds  = new Ext.data.Store({
            reader: new Ext.data.XmlReader({
                record:'tbody tr'
            }, fields)
        });
    
    	ds.loadData(table.dom);
    
        var cm = new Ext.grid.ColumnModel(cols);
    
        if(config.width || config.height){
            ct.setSize(config.width || 'auto', config.height || 'auto');
        }
        if(config.remove !== false){
            table.remove();
        }
    
        Ext.grid.TableGrid.superclass.constructor.call(this, ct,
            Ext.applyIf(config, {
                'ds': ds,
                'cm': cm,
                'sm': new Ext.grid.CellSelectionModel(),
                autoHeight:true,
                autoWidth:true
            }
        ));

    I am having following problems:

    1. I can't see any cursor for editing the input button.

    2. Can i use any modal box for editing the cell?

    3. Can there be some mechanism so that while rendering i see only the text not the input field which should be visible while i focus on the cell like we are doing in editable grid example but using my input field?

    Please help ......

  4. #4
    Ext User
    Join Date
    Jul 2007
    Posts
    9
    Vote Rating
    0
    rajneesh103 is on a distinguished road

      0  

    Default Editable Grid

    Editable Grid


    Why cursor was not being shown in input box in firefox because

    this is a very old Firefox bug - the text cursor (caret) disappears when the input box is positioned on top (or inside) the div with overflowcroll or overflow:auto.

    The only solution which I know - wrap the textbox in another div with overflow:visible.

    If someone knows other way to fix this problem, please let us know, this would help a lot!

Thread Participants: 1