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.
Related
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
This might be a general question in regards to ExtJS 4.2 tabpanel forms.
On the form I have multiple dropdown comboboxes, and they're grouped into fieldset items.
The issue I'm having is when I resize the browser window, the fieldsets only resize one way: when the browser is made wider.
So for example, if I expand the browser to make it a little wider, the fieldset resizes perfectly to fit within the browser. However if I make the browser smaller (width-wise), the fieldset remains the same, and scrollbars will appear.
I have the fieldset config values set to:
xtype: 'fieldset',
title: 'Group 1',
layout: 'anchor',
defaults: { anchor: '-20' },
....
I have the same form set up on a server running extJS 4.0 and I do not have this issue, the fieldset resizes fine when the browser size is changed in any way.
Is there a new config I missed in extJS 4.2?
Disregard my question, I figured it out. I had the main layout set to 'form', and I just needed to change it to 'anchor' as well.
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
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 ;)
Hi everyone i got the following issue, i have a GridPanel with a RowEditor Nevertheless it doesnt validate my fields when it renders
But if i focus all my fields to edit and refresh the grid its just appear as i would like them in the first place
Can you suggest me something? Thanks!!
RowEditor uses Ext.form package components such as: "TextField" "DateField" "ComboBox" and so on... And validations are performed by them. Grid does't have such feature to validate. Validation feature may be achieved by renderer config option of column. For example, your Description column config might be looked like this:
{
header : 'Description',
dataIndex : 'description',
renderer :function(description, metaData){
if(!description){
//if description is blank let background of it be red.
medaData.style+="background-color:red;"; //or whatever css can be applied
}
return description;
}
}