PDA

View Full Version : MaxHeight and OverflowY ignored in displayfield



shaleth
18 Aug 2014, 8:24 AM
All,

I have a display field with the value assigned dynamically. I need the size of the field to be static (the height, that is). As it sits, when I assign a large value to the display field, it ends up resizing and the text wraps behind the grid below it. I know I have to be missing something obvious, but I've dug through the docs to no avail. Note that I have tried VBox (see enclosed code) and Absolute layouts; both show the same behavior.



Ext.define('Myapp.view.XView', {
extend: 'Ext.window.Window',

requires: [
'Ext.form.field.Display',
'Ext.grid.Panel',
'Ext.form.field.ComboBox',
'Ext.grid.column.CheckColumn',
'Ext.grid.View',
'Ext.grid.plugin.DragDrop',
'Ext.selection.CheckboxModel',
'Ext.grid.plugin.CellEditing',
'Ext.form.field.TextArea',
'Ext.toolbar.Toolbar',
'Ext.button.Split',
'Ext.menu.Menu',
'Ext.menu.Item'
],

height: 410,
itemId: 'XView',
shrinkWrap: 0,
width: 700,
title: 'Analysis Xs',
modal: true,

layout: {
type: 'vbox',
align: 'stretch'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'displayfield',
height: 72,
itemId: 'noteTextForX',
margin: 5,
maxHeight: 72,
minHeight: 72,
shrinkWrap: 0,
overflowY: 'scroll',
resizable: false,
value: ''
},
{
xtype: 'gridpanel',
flex: 2,
itemId: 'XGrid',
width: 150,
overflowX: 'auto',
overflowY: 'auto',
sortableColumns: false,
store: 'RedXs',
columns: [
{
xtype: 'gridcolumn',
maxWidth: 40,
dataIndex: 'SEQUENCE',
text: 'Ord#'
},
{
xtype: 'gridcolumn',
draggable: false,
enableColumnHide: false,
dataIndex: 'MANUAL_X',
hideable: false,
text: 'Manual X',
flex: 5,
editor: {
xtype: 'textfield',
itemId: 'ManualXEditor'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var sIcons = Ext.getStore('XIcons');
var retval = '';

if (value) {
sIcons.each(function(nRecord,id) {
if (value == nRecord.data.abbr) {
retval = nRecord.data.name;
}
});
}
return retval;

},
draggable: false,
enableColumnHide: false,
dataIndex: 'X_ICON',
hideable: false,
text: 'Icon?',
flex: 3,
editor: {
xtype: 'combobox',
itemId: 'IconTypeEditor',
displayField: 'name',
forceSelection: true,
queryMode: 'local',
store: 'XIcons',
valueField: 'abbr'
}
},
{
xtype: 'checkcolumn',
disabled: true,
draggable: false,
enableColumnHide: false,
dataIndex: 'IS_FINAL',
hideable: false,
text: 'Final?',
flex: 1
}
],
viewConfig: {
itemId: 'XGridView',
plugins: [
Ext.create('Ext.grid.plugin.DragDrop', {

})
],
listeners: {
drop: {
fn: me.onXDrop,
scope: me
}
}
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
mode: 'SINGLE'
}),
listeners: {
selectionchange: {
fn: me.onXGridSelectionChange,
scope: me
}
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
listeners: {
edit: {
fn: me.onCellEditingEdit,
scope: me
}
}
})
]
},
{
xtype: 'gridpanel',
flex: 5,
itemId: 'XDataGrid',
width: 150,
overflowX: 'auto',
overflowY: 'auto',
title: '',
sortableColumns: false,
columns: [
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var sIcons = Ext.getStore('XDataTypes');
var retval = '';

if (value) {
sIcons.each(function(nRecord,id) {
if (value == nRecord.data.abbr) {
retval = nRecord.data.name;
}
});
}
return retval;

},
draggable: false,
enableColumnHide: false,
dataIndex: 'DATA_TYPE',
hideable: false,
text: 'Data Type',
flex: 2,
editor: {
xtype: 'combobox',
itemId: 'DataTypeEditor',
displayField: 'name',
queryMode: 'local',
store: 'XDataTypes',
valueField: 'abbr'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var sIcons = Ext.getStore('XDataLevels');
var retval = '';

if (value) {
sIcons.each(function(nRecord,id) {
if (value == nRecord.data.abbr) {
retval = nRecord.data.name;
}
});
}
return retval;

},
draggable: false,
enableColumnHide: false,
dataIndex: 'TEXT_LEVEL',
hideable: false,
text: 'Text Level',
flex: 1,
editor: {
xtype: 'combobox',
itemId: 'TextLevelEditor',
displayField: 'name',
queryMode: 'local',
store: 'XDataLevels',
valueField: 'abbr'
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return '<div style="white-space:normal">' + value + '</div>';
},
draggable: false,
enableColumnHide: false,
dataIndex: 'X_TEXT',
hideable: false,
text: 'X Text',
flex: 8,
editor: {
xtype: 'textareafield',
itemId: 'XTextEditor',
grow: true
}
}
],
viewConfig: {
itemId: 'XDataGridView',
plugins: [
Ext.create('Ext.grid.plugin.DragDrop', {

})
],
listeners: {
drop: {
fn: me.onXDataDrop,
scope: me
}
}
},
selModel: Ext.create('Ext.selection.RowModel', {

}),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
listeners: {
edit: {
fn: me.onCellEditingEdit1,
scope: me
}
}
})
],
listeners: {
selectionchange: {
fn: me.onXDataGridSelectionChange,
scope: me
}
}
}
],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
itemId: 'XToolbar',
items: [
{
xtype: 'splitbutton',
handler: function(button, e) {
this.showMenu();
},
flex: 1,
itemId: 'insertXButton',
text: 'Add Data',
menu: {
xtype: 'menu',
itemId: 'XAddMenu',
items: [
{
xtype: 'menuitem',
itemId: 'addBlankOpt',
text: 'Add Blank X'
},
{
xtype: 'menuitem',
itemId: 'addManualOpt',
text: 'Add Manual X'
},
{
xtype: 'menuitem',
disabled: true,
itemId: 'addXDataOpt',
text: 'Add X Data Row'
},
{
xtype: 'menuitem',
itemId: 'addXHistOpt',
text: 'Add X from History'
}
]
}
},
{
xtype: 'button',
flex: 1,
disabled: true,
itemId: 'deleteXDataButton',
text: 'Delete X Data Row'
},
{
xtype: 'button',
flex: 1,
disabled: true,
itemId: 'deleteXButton',
text: 'Delete Entire X'
},
{
xtype: 'button',
flex: 1,
disabled: true,
itemId: 'saveXGrid',
text: 'Save'
},
{
xtype: 'button',
disabled: true,
itemId: 'validateXButton',
text: 'Save and Finalize X'
}
]
}
]
});

me.callParent(arguments);
},

onXDrop: function(node, data, overModel, dropPosition, eOpts) {

var mySeq = 1;
var sdStore = Ext.ComponentQuery.query('#XGrid')[0].getStore();
sdStore.each(function(ntsrecord,id) {
ntsrecord.set('SEQUENCE',mySeq);
mySeq = mySeq + 1;
});

if (Myapp.app.isStoreModified(sdStore)) {
Ext.ComponentQuery.query('#saveXGrid')[0].enable();
}

},

onXGridSelectionChange: function(model, selected, eOpts) {
Ext.ComponentQuery.query('#XDataGrid')[0].reconfigure(selected[0].Xdata());
if (!selected[0].data.IS_FINAL) {
Ext.ComponentQuery.query('#validateXButton')[0].enable();
}
Ext.ComponentQuery.query('#deleteXButton')[0].enable();
if (!selected[0].data.MANUAL_X) {
Ext.ComponentQuery.query('#addXDataOpt')[0].enable();
} else {
Ext.ComponentQuery.query('#addXDataOpt')[0].disable();
}
},

onCellEditingEdit: function(editor, e, eOpts) {
var sdStore = Ext.ComponentQuery.query('#XGrid')[0].getStore();
if (Myapp.app.isStoreModified(sdStore)) {
Ext.ComponentQuery.query('#saveXGrid')[0].enable();
}

},

onXDataDrop: function(node, data, overModel, dropPosition, eOpts) {
var mySeq = 1;
var sdStore = Ext.ComponentQuery.query('#XDataGrid')[0].getStore();
sdStore.each(function(ntsrecord,id) {
ntsrecord.set('SEQUENCE',mySeq);
mySeq = mySeq + 1;
});

if (Myapp.app.isStoreModified(sdStore)) {
Ext.ComponentQuery.query('#saveXGrid')[0].enable();
}

},

onCellEditingEdit1: function(editor, e, eOpts) {
var sdStore = Ext.ComponentQuery.query('#XDataGrid')[0].getStore();
if (Myapp.app.isStoreModified(sdStore)) {
Ext.ComponentQuery.query('#saveXGrid')[0].enable();
}

},

onXDataGridSelectionChange: function(model, selected, eOpts) {
if (selected[0]) {
Ext.ComponentQuery.query('#deleteXDataButton')[0].enable();
} else {
Ext.ComponentQuery.query('#deleteXDataButton')[0].disable();
}
}

});


Thanks,
Shaleth

slemmon
19 Aug 2014, 9:30 PM
Hi,

Can you post a small test case demonstrating the issue you're seeing at https://fiddle.sencha.com and I'll test along with you?

Also, what version of ExtJS are you working with?

shaleth
20 Aug 2014, 12:09 PM
Hi!

I'm using v4.2, and my (very first!) fiddle is here: https://fiddle.sencha.com/#fiddle/96q.

Thanks so much for your assistance.

-Shaleth

chamacs
20 Aug 2014, 12:57 PM
A workaround: wrap display field in a field container:
For fiddle:

items: [{
xtype : 'fieldcontainer',
height: 50,
margin: "1 5 5 5",
maxHeight: 50,
minHeight: 50,
overflowY: 'scroll',
layout : 'fit',
items : [{
xtype: 'displayfield',
itemId: 'noteTextForX',
margin: "0 20 0 0",
value: ''
}]
}, {
..............


side note: the margin on the displayfield config avoids a horizontal scrollbar from displaying.

shaleth
20 Aug 2014, 1:01 PM
Thank you, Chamacs - that definitely accomplishes what I need.

I'm still confused about why the displayfield ignored the settings, but I'm good to go. :)