PDA

View Full Version : grid cell editor width takes all width up to the right window border



Vitaliy.Pianykh
29 Dec 2015, 5:15 AM
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:53824

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:

<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:

<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-w…ments.js:81101)
Ext.define.statics.flushLayouts (ext-all-debug-w…ments.js:63859)
Ext.define.statics.updateLayout (ext-all-debug-w…ments.js:63887)
Ext.define.updateLayout (ext-all-debug-w…ments.js:66494)
Ext.define.onContentChange (ext-all-debug-w…ments.js:60614)
Ext.define.updateLayout (ext-all-debug-w…ments.js:66489)
Ext.define.setSize (ext-all-debug-w…ments.js:66397)
Ext.define.setWidth (ext-all-debug-w…ments.js:66805) << correct values comes here
Ext.define.realign (ext-all-debug-w…ents.js:110808)
Ext.define.startEdit (ext-all-debug-w…ents.js:110484)
call (ext-all-debug-w…ments.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:


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/2526@{#532}


OS
Windows


Blink
537.36 (@19b9e1a5713f4b9ae324bd59bbe16ca6eb91d0e0)


JavaScript
V8 4.7.80.25

jdkhamba
30 Dec 2015, 3:04 AM
Seems to work fine :

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

Can you reproduce your issue in a fiddle?

Vitaliy.Pianykh
1 Feb 2016, 5:19 AM
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.

jdkhamba
1 Feb 2016, 5:25 AM
This is because you didn't mention the region for the grid since the window has a border layout:


items: [{
xtype: 'numbergrid',
region:'center'
}


The moment you add the region : 'center' it works.