Results 1 to 9 of 9

Thread: [2.0.2][DUP][FIXED] Wrong size of editbox in EditorGrid after scroll, Mozilla

  1. #1
    Ext User
    Join Date
    Oct 2007
    Location
    Minsk, Belarus
    Posts
    10

    Default [2.0.2][DUP][FIXED] Wrong size of editbox in EditorGrid after scroll, Mozilla

    Here is the problem.
    I have an editor grid where I can edit fields on double click. So everything is fine before I scroll the grid horizontally. After that editboxes(those, which weren't visible before) don't work properly. They became small, they have a something like scrollbar(scrollbar for editbox). DateField don't work at all. This bug in Mozilla. IE is ok. While debugging, I've found that size of parent of parent of editbox(some div) is wrong.

  2. #2

    Default

    I had almost the same problem with Mozilla. After scrolling horizontally a window with an EditorGridPanel inside, the editable fields don't display the edit box when you click to edit them. Though if you insert a new value and press enter, it inmediatly appears in the grid, in the cell you edited. I tried the same code in Microsoft Explorer and worked fine.

  3. #3
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    @pozirk, please post your test code + details as per https://www.sencha.com/forum/showthread.php?t=13985. thanks.

  4. #4

    Default

    The window code:

    Code:
    var myWindow = function (){
    
    	grid = new myGridPanel();
    
    	myWindow.superclass.constructor.call(this, {
    		title: 'My Window',
            	width: 900,
            	height: 500,
    		plain:true,
    		layout: 'fit',
    		autoScroll: true,
    		items: [grid]
    	});
    
    	this.show();
    	
    }
    
    Ext.extend(myWindow, Ext.Window);
    The EditorGridPanel code:

    Code:
    var myGridPanel = function () {
    
    	sstore = new Ext.data.SimpleStore(		
                          {fields: 
    			[{name: 'col_1', type: 'float'},
    			 {name: 'col_2', type: 'float'},
    			 {name: 'col_3', type: 'float'},
    			 {name: 'col_4', type: 'float'},
    			 {name: 'col_5', type: 'float'},
    			 {name: 'col_6', type: 'float'},
    			 {name: 'col_7', type: 'float'},
    			 {name: 'col_8', type: 'float'},
    			 {name: 'col_9', type: 'float'},
    			 {name: 'col_10', type: 'float'}
                            ]});
    
    	// creates the Grid
    	myGridPanel.superclass.constructor.call(this, {
    		store: sstore,
    		columns: 		
            	 [{header: 'Column 1', width: 90, sortable: true, dataIndex: 'col_1',
    			editor: new Ext.form.NumberField({
    				allowBlank: false,
    				decimalSeparator : '.',
            			allowDecimals: true,
            			allowNegative: false
    				})
    		 },
    		 {header: 'Column 2', width: 90, sortable: true, dataIndex: 'col_2', readOnly: true},
            	 {header: 'Column 3', width: 90, sortable: true, dataIndex: 'col_3',
    			editor: new Ext.form.NumberField({
    				allowBlank: false,
    				decimalSeparator : '.',
            			allowDecimals: true,
            			allowNegative: false
    				})
    		 },
    		 {header: 'Column 4', width: 90, sortable: true, dataIndex: 'col_4', readOnly: true},
            	 {header: 'Column 5', width: 90, sortable: true, dataIndex: 'col_5', 
    			editor: new Ext.form.NumberField({
    				allowBlank: false,
    				decimalSeparator : '.',
            			allowDecimals: true,
            			allowNegative: false
    			})
    		 },
    		 {header: 'Column 6', width: 90, sortable: true, dataIndex: 'col_6', readOnly: true},
            	 {header: 'Column 7', width: 90, sortable: true, dataIndex: 'col_7',
    			editor: new Ext.form.NumberField({
    				allowBlank: false,
    				decimalSeparator : '.',
            			allowDecimals: true,
            			allowNegative: false
    			})
    		 },
    		 {header: 'Column 8', width: 90, sortable: true, dataIndex: 'col_8', readOnly: true},
            	 {header: 'Column 9', width: 90, sortable: true, dataIndex: 'col_9',
    			editor: new Ext.form.NumberField({
    				allowBlank: false,
    				decimalSeparator : '.',
            			allowDecimals: true,
            			allowNegative: false
    			})
    		 },
    		 {header: 'Column 10', width: 90, sortable: true, dataIndex: 'col_10', readOnly: true}],
    		sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
            	closable:true,
    		plain:true,
    		layout: 'fit',
    		frame:true,	
    		clicksToEdit: 1
    	});
    
    	this.on('bodyscroll', function() {
    					this.getView().refresh(true);
    				}, this);
    
    }
    
    Ext.extend(myGridPanel, Ext.grid.EditorGridPanel);

  5. #5
    Ext User
    Join Date
    Oct 2007
    Location
    Minsk, Belarus
    Posts
    10

    Default

    2 Eldhelrim: thanks for the code.
    Actually it can be any EditorGrid with horizontal scrolling.

    Here is my temporary solution(maybe it'll help you to solve the problem):
    "columns" is an array of columns for Ext.grid.ColumnModel after creating it, for example
    Code:
    {
    	id: 'name_id',
    	header: 'Name',
       	dataIndex: 'name',
       	width: 220,
       	editor: new fm.TextField({allowBlank: false, selectOnFocus: true})
    }
    Code:
    for(var i = 0; i < columns.length; i++){
            if(columns[i].editor){
                columns[i].editor.on('beforeshow', function(s){
                    var corEl = this.el.parent('div.x-layer');
                    if(corEl&&this.lastSize.width)
                        corEl.dom.style.width=this.lastSize.width + 'px';
                });
            }
        }
    ExtJS 2.0.2
    Windows XP
    Mozilla 2.0.0.13

    Screenshot:

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4

    Default

    I believe this is a duplicate of several other posts (like this one). If so, it's already fixed in SVN.

  7. #7
    Ext User
    Join Date
    Oct 2007
    Location
    Minsk, Belarus
    Posts
    10

    Default

    Yep. That's the same error. Thanks.

  8. #8
    Sencha Premium User
    Join Date
    Sep 2007
    Location
    Brasov
    Posts
    12

    Talking

    Hello, i have also this problem with editor grid and horizontal scrollbar.

    I fix it with this code:

    Code:
    for(var i = 0; i < columns.length; i++){
            if(columns[i].editor){
                columns[i].editor.on('beforeshow', function(s){
                    var corEl = this.el.parent('div.x-layer');
                    if(corEl&&this.lastSize.width)
                        corEl.dom.style.width=this.lastSize.width + 'px';
                });
            }
        }
    Thanks !

  9. #9

    Default

    This bug still exists in 2.1, fortunately the same fixes work still as well.

Posting Permissions

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