Results 1 to 4 of 4

Thread: grid cell editor width takes all width up to the right window border

  1. #1

    Default grid cell editor width takes all width up to the right window border

    Hello All,

    I'm facing strange issue with cell editors.

    Steps to reproduce:
    1. Open window
    2. Maximize dialog
    3. Enter cell editor

    Result:
    Some of cell editors take normal width. But some spread too much.

    In action:BugExtCellEditor.gif

    I've debugged a bit with extjs/4.1.0/ext-all-debug-w-comments.js:

    I noticed that cell editor table element for non working cells are missing width:

    Not working:
    Code:
    <div id="ext-comp-1783" class="x-editor x-small-editor x-grid-editor x-layer x-editor-default" style="left: 1179px; top: 339px; z-index: 19020;" tabindex="-1">
    
    <table id="numberfield-1782"
    class="x-field x-form-item x-field-default x-container-form-item"
    cellpadding="0"
    style="table-layout: fixed;">
    Working:
    Code:
    <div id="ext-comp-1781" class="x-editor x-small-editor x-grid-editor x-layer x-editor-default" style="left: 1032px; top: 339px; z-index: 19020;" tabindex="-1">
    
    
    <table id="numberfield-1780" class="x-field x-form-item x-field-default x-container-form-item"
    cellpadding="0"
    style="table-layout: fixed; width: 146px;">
    I thought that width was set to "nothing" for some reason.
    I put breakpoint on DOM attributes change and found that style set in flush function (see below).

    Than I set a breakpoint on the flush function and found that stack traces are the same for both the same for both working and non working editors:

    Ext.define.run (ext-all-debug-wments.js:81101)
    Ext.define.statics.flushLayouts (ext-all-debug-wments.js:63859)
    Ext.define.statics.updateLayout (ext-all-debug-wments.js:63887)
    Ext.define.updateLayout (ext-all-debug-wments.js:66494)
    Ext.define.onContentChange (ext-all-debug-wments.js:60614)
    Ext.define.updateLayout (ext-all-debug-wments.js:66489)
    Ext.define.setSize (ext-all-debug-wments.js:66397)
    Ext.define.setWidth (ext-all-debug-wments.js:66805) << correct values comes here
    Ext.define.realign (ext-all-debug-wents.js:110808)
    Ext.define.startEdit (ext-all-debug-wents.js:110484)
    call (ext-all-debug-wments.js:13456)

    SetWidth gets value (~150px) but for some reason flushQueue variable is empty for non working editors. That's the reason why width is missing in rendered HTML.

    This is function that differs:
    Line 80487:
    Code:
        flush: function () {
            var me = this,
                items = me.flushQueue.clear(), <<< flushQueue is empty
                length = items.length, i;
    
    
            if (length) {
                ++me.flushCount;
    
    
                for (i = 0; i < length; ++i) {
                    items[i].flush();
                }
            }
        },
    Setting MaxWidth doesn't help. So I don't have idea how to fix this.
    Anyone seen this issue?

    ExtJS version is 4.1.0
    Reproduced with: ext-all-debug-w-comments.js and ext-all.js
    Cell editors affected: numberfield, combobox
    Browser:

    Google Chrome 47.0.2526.106 (Official Build) m (32-bit)
    Revision 19b9e1a5713f4b9ae324bd59bbe16ca6eb91d0e0-refs/branch-heads/[email protected]{#532}
    OS Windows
    Blink 537.36 (@19b9e1a5713f4b9ae324bd59bbe16ca6eb91d0e0)
    JavaScript V8 4.7.80.25

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Seems to work fine :

    https://fiddle.sencha.com/#fiddle/135q

    Can you reproduce your issue in a fiddle?

  3. #3

    Default

    Quote Originally Posted by jdkhamba View Post
    Seems to work fine :

    https://fiddle.sencha.com/#fiddle/135q

    Can you reproduce your issue in a fiddle?
    Here is my fiddle: https://fiddle.sencha.com/#fiddle/14st

    The third column is not visible at all.
    The second column editor and column are very wide.

    This is pretty much the same that I see.

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    This is because you didn't mention the region for the grid since the window has a border layout:

    Code:
    items: [{
            xtype: 'numbergrid',
            region:'center'
        }
    The moment you add the region : 'center' it works.

Similar Threads

  1. Replies: 3
    Last Post: 6 Mar 2012, 3:08 AM
  2. How to make editor size not limited by grid cell width
    By picsadmin in forum Ext: Discussion
    Replies: 0
    Last Post: 18 May 2011, 12:00 PM
  3. Replies: 0
    Last Post: 9 Feb 2011, 11:06 AM
  4. Grid auto width goes past the window width?
    By TheBuzzer in forum Community Discussion
    Replies: 0
    Last Post: 3 Jul 2009, 2:17 PM

Posting Permissions

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