I have set up an EditorGridPanel with ComboBox's and it's working well. The only issue I'm having is that the width of the ComboBox seems to only expand to the width of the grid column, and not the content of the ComboBox itself.
Is there a way around this?
Here's an example of what I mean:
Thanks!
Use the
listWidth : Number
config option
You could calculate the length of the largest content element and then set the listWidth in the 'expand' event of the combo
Cheers!
listWidth does'nt exist in extjs 4.
Add below to combobox config:
matchFieldWidth: false,
listConfig: {
width: 200
},
You can use RowEditor to managed multi forms editor !
see sencha's samples ;)
Related
tooltip: dizionario.traduci("${GRCLI_SW_T_PERIODO}"),
This is my Sample Code, I am using Extjs 3.4.0 am trying to update the tooltip of grid column on runtime, I am using column.tooltip = "abc" it changes the tooltip config but on mouse hover I am not able to see updated tooltip
The case is normal and easy. Actually, if you change the tooltip from tooltip config of extjs you need to refresh your DOM
You just need to get grid first and then you get the column on which you want to change the tooltip.
Code:
gridColumn.tooltip = "updatedTooltip";
Then for refresh DOM you just do:
gridPanel.getView().updateHeaders();
Thank You :)
Very simple scenario: I want to have a small grid for a good overview. But when clicking in a cell the editor should have a higher width than the actual column.
Example:
https://fiddle.sencha.com/#fiddle/reg&view/editor
I tried to specify the width and I tried to add it in the afterrender. Width is always exactly as wide as the column. Same problem with textareas.
editor: {
xtype: 'textfield',
enableKeyEvents: true,
selectOnFocus: true,
width: 500,
listeners: {
afterrender: function (field) {
field.setWidth(500);
}
}
}
I thought this should be easy but I couldn't find a way to accomplish that. I can specify the height on a textarea but the width isn't considered.
Check below fiddle.
https://fiddle.sencha.com/#fiddle/27bv&view/editor
Here I have done change for setting width of table node in which cell editor is rendered by Ext.get(Ext.get(Ext.query('div.x-grid-editor')[0]).dom.childNodes[0]).setWidth(300).
This approach is having one limitation- for first time width is not getting set as in beforeedit event we do not get instance of editor.If we get this instance we can apply similar logic for setting editor's width.
please check if it could solve your issue or not.Also let me know for any changes.
Note: I have impl. this thing for first column only.
Okay, I figured out a solution which is pretty close to mine.
afterrender: function (field) {
field.bodyEl.setWidth(500);
}
This works for textareas and textfields with Ext version 5. I found out that in my fiddle I also used the wrong Ext version. Seems not to work with Ext 4.
https://fiddle.sencha.com/#fiddle/27cc&view/editor
2,I am displaying more than 15 records in gridpanel . But only 10 records are displaying, other records are hiding below. I want to add vertical scrollbar to gridpanel, how can i achieve this.
You can use autoScroll : true config
OR
give overflow:auto css property to body of grid
my requirement is to have colours in combo box instead of textual value as "RED", "GREEN" in dropdown. am trying to achieve this using EXTJS 4.2. Could any one please help me how to configure the combobox.
is there any way to add colour images as values to combobox.
You should use listConfig config to change the behaviour of combobox picker. (For more information: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox-cfg-listConfig)
Perhaps you give the combobox element a css class (e.g. 'foo'), or style tag, and then set the background-color with CSS
.foo{
background-color: red
}
It can be done by setting 'background-color: color; background-image: none;'
Take look at this expamle
I want displayfield to span multiple lines, when there is some large content inside. I tried many configurations and css-styling, but to no avail. If there is no quick solution, could you please advise me another component, that I could use instead of displayfield.
assign width and height config explicitly and if it is not enough use maxWidth and maxHeight configs
check out :
http://jsfiddle.net/acteon/p46v3/
{
xtype: 'displayfield',
value: 'line 1 aasdasdasdasdasdasd line 2 ad asd asd asd asd asdasd',
fieldLabel: 'multiLineField',
width : '20%'
}
Oh, I used textarea with readOnly set to true. It works almost as I want.
This answer is for ExtJS 4.2 - not sure about later versions.
The sass definition file at ext/packages/ext-theme-neutral/sass/src/form/field/Display.scss has a height definition, using $form-field-height. If this height is removed, then the field will expand/contract based on the content within.