PDA

View Full Version : Input elements break out of wrap in non-form layouts?



stephenliberty
13 Jul 2010, 8:01 AM
Hey all,

Hopefully someone can tell me why this is happening.. I've been playing with this for days and nothing seems to work quite right. Whenever I put a textfield based item in something that isn't managed by a form layout it seems to screw up (granted I have not tested every layout out there). Here's the problem. I have a list of stuff:


win = new Ext.Window({
cls:'FrameworkWindow',
width:300,

closable:false,
title:'Test Window',
items:new Ext.FormPanel({
border:false,
items:[
//Problem starts here
{
fieldLabel:"Location",
xtype:'compositefield', //see note below
border:false,
items:[
{hideLabel:'true',name:'location',xtype:'textfield',flex:1},
{xtype:'button',text:"View",width:30}
]
},
//Problem ends here
{
xtype:'textfield',
emptyText:'Text Field',
hideLabel:true,
name:'textfield'
},
{
xtype:'combo',
hideLabel:true,
emptyText:'Combo',
name:'combo',
store:new Ext.data.ArrayStore({fields:['n','w'],data:[[1,"wee"],[2,'wee2']]}),
triggerAction:'all',
mode:'local'
},
{
xtype:'datefield',
hideLabel:true,
emptyText:'Date',
name:'date'
}
],
buttons:[
{text:'Save'},{text:'Cancel'}
]
})
});
The note - Regardless of whether I use compositefield or panel with an 'hbox' layout, this seems to be the culprit - the moment I change the layout to 'form' it works fine except the button is out of whack because its not being laid out right.

Alright, now here's the alteration I did to the textfield:


Ext.override(Ext.form.TextField,{
onRender : function(ct,position){
if(!this.el){
var cfg = this.getAutoCreate();

if(!cfg.name){
cfg.name = this.name || this.id;
}
if(this.inputType){
cfg.type = this.inputType;
}
this.autoEl = cfg;
}
Ext.form.Field.superclass.onRender.call(this, ct, position);
if(this.submitValue === false){
this.el.dom.removeAttribute('name');
}
var type = this.el.dom.type;
if(type){
if(type == 'password'){
type = 'text';
}
this.el.addClass('x-form-'+type);
}
if(this.readOnly){
this.setReadOnly(true);
}
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}

this.el.addClass([this.fieldClass, this.cls]);
this.wrappper = this.el.boxWrap('textFieldSuperWrap');// This is the only line added

}
});
The reason for this is because throughout the entire application I'm building, all of the input fields need to be rounded, and really this seemed the most logical way of doing it. Here's the CSS



.textFieldSuperWrap{
float:left; //Seems to be needed to make the box fit tightly, corrections appreciated :)
}
.textFieldSuperWrap-mr{
background-image:url("../images/TextFieldRight.png");
padding-right:5px;
height:23px;
background-position:right top;
background-repeat:no-repeat;
}
.textFieldSuperWrap-ml{
background-image:url("../images/TextFieldLeft.png");
padding-left:5px;
height:23px;
background-repeat:no-repeat;
}
.textFieldSuperWrap-mc{
min-height: 23px;
float:left;
background-image:url("../images/TextFieldBackground.png");

}
This makes everything *perfect* except for the fields that are inside of something like a compositefield or hbox panel. When this happens, this is what firebug shows me:


RIGHT:
<div style="padding-left: 105px;" id="x-form-el-ext-comp-1003" class="x-form-element">
<div class="textFieldSuperWrap" id="ext-gen31">
<div class="textFieldSuperWrap-tl"><div class="textFieldSuperWrap-tr"><div class="textFieldSuperWrap-tc"></div></div></div>
<div class="textFieldSuperWrap-ml">
<div class="textFieldSuperWrap-mr">
<div class="textFieldSuperWrap-mc">
<input type="text" name="textfield" id="ext-comp-1003" autocomplete="off" size="20" class="x-form-text x-form-field x-form-empty-field">
</div>
</div>
</div>
<div class="textFieldSuperWrap-bl"><div class="textFieldSuperWrap-br"><div class="textFieldSuperWrap-bc"></div></div></div></div>
</div>

WRONG (only formatted, so a button is in here too):
<div style="width: 165px;" class=" x-form-composite x-box-layout-ct x-form-field" id="ext-comp-1011">
<div style="width: 165px; height: 20px;" id="ext-gen26" class="x-box-inner">
<input style="width: 124px; height: 18px; left: 0px; top: 0px;" class="x-form-text x-form-field x-box-item" size="20" autocomplete="off" id="ext-comp-1012" name="location" type="text">
<div id="ext-gen27" class="textFieldSuperWrap">
<div class="textFieldSuperWrap-tl"><div class="textFieldSuperWrap-tr"><div class="textFieldSuperWrap-tc"></div></div></div>
<div class="textFieldSuperWrap-ml"><div class="textFieldSuperWrap-mr"><div class="textFieldSuperWrap-mc"></div></div></div>//Why is the input elemnet and friends outside of the -mc?
<div class="textFieldSuperWrap-bl"><div class="textFieldSuperWrap-br"><div class="textFieldSuperWrap-bc"></div></div></div>
</div>
<table style="width: 30px; left: 135px; top: 0px;" id="ext-comp-1013" class="x-btn x-btn-noicon x-box-item" cellspacing="0"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i>&nbsp;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-ml"><i>&nbsp;</i></td><td class="x-btn-mc"><em class="" unselectable="on"><button class=" x-btn-text" id="ext-gen28" type="button">View</button></em></td><td class="x-btn-mr"><i>&nbsp;</i></td></tr><tr><td class="x-btn-bl"><i>&nbsp;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&nbsp;</i></td></tr></tbody></table>
</div>
</div>
Hopefully this makes sense to someone. It'd be a shame to have to say "Oh, I can't put a button there because then it won't work!" :P

Thanks!
Stephen

stephenliberty
13 Jul 2010, 8:03 AM
Crap, I totally put this in the wrong forum. Can an admin move it for me? Thanks!

jarrednicholls
13 Jul 2010, 8:21 AM
No problem Stephen, I have moved it to the Ext: Help forums for you.

stephenliberty
17 Jul 2010, 2:26 PM
This is a half bump, half update.

I found if I changed my code slightly so that it looks like...


{
fieldLabel:"Location",
xtype:'panel', //see note below
layout:'hbox',
border:false,
items:[
{xtype:'panel',layout:'form',items:{hideLabel:'true',name:'location',xtype:'textfield',flex:1}},
{xtype:'panel',layout:'form',items:{xtype:'button',text:"View",width:30}}
]
}
Will work under certain circumstances.. but it is definitely still busted on toolbars (for instance if I want to put a combo box in a toolbar as part of a search or something).

Any help or pointers in the right direction would be appreciated...