PDA

View Full Version : Field widths not applying. Anchor not applying.



Csegota
27 Mar 2015, 12:39 PM
Preface: I inherited the maintenance job of this code, so feel free point out anything that could be improved or done more efficiently. I am no ExtJS master. Also, thanks in advance for reading my super long post.

Below is a section of the current rendering of my code in a form.Panel, each 'line' is a container, with a checkbox, a text field, and some buttons. containers are then added to the form.Panel.52058

What I would like to do is increase the width of the input text field, basically filling more of the panel.

Because of application constraints, I cannot send a width to the constructor of the field because these fields are reused many times all over the app, sending a width in the config would sometimes override the proto width, which I need to work.

So that leaves me with either (as far as I know) changing the width after the field has been created (proven problematic due to lazy instantiation constraints?), or possibly anchor the fields (also proven problematic, due to my lack of better understanding about layouts, fields, containers, and how they interact).

I will attempt to summarize the code involved. And explain a couple of attempts I've made, commented in the code:

All my fields reside in a form.Panel, which is contained in a window.



Ext.define('MyApp.view.form.AE', { //The form.Panel
extend : 'Ext.form.Panel',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 180
//It would be nice to add something like width: 450 here, however this ends up applying to the checkboxes also, which is problematic.
})
InitializeAE: function(AE) { //called to create all the fields for the form.
//For each field to be created in the form, loop the following.
var btn1, btn2 = {
xtype: 'button'
...
}
var space = {
html:' ', style:'visibility:hidden;'
}
var checkbox = {
xtype:'checkboxfield',
...
}
var field = createFieldFromConfig(config); //A field config xtype = 'text' is retrieved, with other configs
//field.width = 450; Does not work here. Because the field has not been instantiated yet(?)

AE.add({ /Add items for each field to a containter, and add that container to AE panel
xtype: 'container',
layout : 'hbox', style:'margin:5px 0;',
items: [ /
checkbox,
space,
field,
space,
btn1,btn2
]
})
//End Loop

}


An example of a text field class that will be created depending on what type of form.field we are instantiating. Based on the config passed to createFieldFromConfig(), one of many types of fields(text, date, number, etc) will have its config initialized(although not instantiated, because the config uses xtype, which defers creation until the object is added to form, from my understaning).


Ext.define('MyApp.view.formElement.Text', {
extend: 'Ext.form.field.Text',
alias: 'widget.t_text',
constructor: function(cfg) {
this.superclass.constructor.call(this, {
name: cfg.formPropertyName,
_params: cfg,
fieldLabel: cfg.isSearch ? cfg.searchLabel : cfg.fullLabel,
labelAlign: cfg.labelOrientation === 'vertical' ? 'top' : 'left',
allowBlank: cfg.isRequired === 'Y' ? false : true,
enableKeyEvents: true,
listeners: cfg.onKeyDown,
value: cfg.value
//width: cfg.width ? cfg.width : '' //Cant use this, although no width is provided in the proto config of this class, in other field situations it is, and we dont want to override it.
});
}



Any advice on how to achieve that larger text field width would be greatly appreciated. And also any general advice :). Keep in mind, the 'field' vars that are being rendered to each 'container' can be one of many different types, text, date, number, decimal, textarea, etc. I would like a method of setting the width for all of them.

Thanks!!

I realize the functions and view code in this AE panel should be separated into views and controller functions, but that is something I will just have to tackle another day.

chamacs
27 Mar 2015, 1:29 PM
Try adding a flex attribute to your field. This should expand the field to take up all available space not used by the other items. something like :



...
var field = createFieldFromConfig(config); //A field config xtype = 'text' is retrieved, with other configs
//field.width = 450; Does not work here. Because the field has not been instantiated yet(?)
field.flex = 1;
...


Hope that helps.

Csegota
27 Mar 2015, 2:19 PM
That didn't seem to apply. There was no change in the rendering. I think probably for the same reason that adding width = 450 did apply. I think it has something to do with the fact that the object hasn't been instantiated yet.

Thanks

chamacs
27 Mar 2015, 5:19 PM
Have you tried giving the Panel (with the containers) a layout config? something like:



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


This shows a working example:
ken

Csegota
31 Mar 2015, 4:04 PM
Thanks for your reply. After trying that the only effect on the panel was that a scroll bar was no longer rendered. It didn't size the fields as we desire.

Csegota
1 Apr 2015, 10:07 AM
Ok, I came up with a solution I'm willing to live with.



var contObj = this.add({
xtype: 'container',
layout: {
type: 'hbox'
},
style: 'margin:5px 0;',
items: [
checkbox,
space,
next,
space,
btn1, btn2
]
});
contObj.items.items[2].width = 450;



The add method of a panel returns a reference to the object that was created/added. I then access the field object in each container because it is always going to be the 3rd ( index 2) item in the containers. I can then change the width config directly. And when the AE form is added to the page the layout is drawn correctly, no need to even call a doLayout().