PDA

View Full Version : [NOREPRO] hbox layout doesnt work in fieldset



ramannachekuri
6 Nov 2012, 9:07 AM
we have multiple views in our app and few of them have fieldsets.we had to implement hbox configuration for few of the fieldsets. This was working fine before 2.1, but now it doesn't work. Here is the code I have
{
xtype: 'fieldset',
margin:0,
border: false,
id:'closecaseFieldset',
items: [


{
xtype : 'textfield',
name : 'tagProductNo',
label : L.tagProductNo,
labelCls:'fieldLabelClass',
labelWidth:135,
clearIcon:true
},
{
xtype : 'textfield',
name : 'tagSerialNo',
label : L.tagSerialNo,
labelCls:'fieldLabelClass',
labelWidth:135,
clearIcon:true

},


{
xtype: 'textfield',
name: 'tagSysProductNo',
label: L.tagSysProductNo,
labelCls:'fieldLabelClass',
labelWidth:135,
clearIcon:true
},
{
xtype: 'textfield',
name: 'tagSysSerialNo',
id:'tagSysSerialNo',
label: L.tagSysSerialNo,
labelCls:'fieldLabelClass',
hideOnMaskTap:true,
labelWidth:135,
clearIcon:true
},
{
xtype: 'selectfield',
name : 'tagOrderType',
label: L.tagOrderType,
labelCls:'fieldLabelClass',
id:'tagOrderType',
labelWidth:135,
usePicker:false,
store:me.getOrderTypeStore()
},
{
xtype: 'textfield',
name: 'tagSeviceNoteNo',
label: L.tagSeviceNoteNo,
labelCls:'fieldLabelClass',
hideOnMaskTap:true,
labelWidth:135,
clearIcon:true
},


{
xtype: 'textfield',
name: 'tagCTN',
label: L.tagCTN,
labelCls:'fieldLabelClass',
hideOnMaskTap:true,
labelWidth:135,
clearIcon:true
},




{
xtype: 'selectfield',
name : 'tagRepairClass',
id : 'tagRepairClass',
label: L.tagRepairClass,
labelCls:'fieldLabelClass',
labelWidth:135,
usePicker:false,
store:me.getRepairClassStore()


},
{
xtype: 'selectfield',
name : 'tagDelayCode',
id : 'tagDelayCode',
label: L.tagDelayCode,
labelCls:'fieldLabelClass',
labelWidth:135,
usePicker:false,
store:me.getDelayCodeStore()
},
{
xtype: 'textareafield',
name: 'tagClosingSummary',
id: 'tagClosingSummary',
label: L.tagClosingSummary,
labelCls:'fieldLabelClass',
hideOnMaskTap:true,
labelWidth:135,
clearIcon:true
},
//tag for arrival time
{
xtype: 'datetimepickerfield',
name : 'tagArrivalTime',
id:'tagArrivalTime',
label: L.tagArrivalTime,
labelCls:'fieldLabelClass',
labelWidth:135,
myPicker:gPicker,
format : gdateFormat5,
value: new Date()
},
//tag for finished time
{
xtype: 'datetimepickerfield',
name : 'tagFinishedTime',
id:'tagFinishedTime',
label: L.tagFinishedTime,
labelCls:'fieldLabelClass',
labelWidth:135,
myPicker:gPicker,
format : gdateFormat5,
value: new Date()
},
//tag for System Fixed Time
{
xtype: 'datetimepickerfield',
name : 'tagSysFixedTime',
id:'tagSysFixedTime',
label: L.tagSysFixedTime,
labelCls:'fieldLabelClass',
labelWidth:135,
myPicker:gPicker,
format : gdateFormat5,
value: new Date()
},
{
//layout: 'hbox',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'numberfield',
minValue:0,
maxValue:24,
maxLength : 2,
name: 'tagDurationHr',
id: 'tagDurationHr',
label: L.tagDurationHr,
labelCls:'fieldLabelClass',
labelWidth:135,
width : 140,
//clearIcon:true,
},
/*{
xtype:'spacer',
html:'Hrs',
padding:5,
flex : 1
//width:10
},*/
{
xtype: 'numberfield',
minValue:0,
maxValue:59,
maxLength : 2,
name: 'tagDurationMn',
id : 'tagDurationMn',
width:145,
//clearIcon:true,

}
]

},

/* {
xtype: 'numberfield',
minValue:0,
maxValue:24,
name: 'tagDurationHr',
id: 'tagDurationHr',
label: L.tagDurationHr,
labelCls:'fieldLabelClass',
labelWidth:135,
width:155,
clearIcon:true
},
{
xtype: 'numberfield',
minValue:0,
maxValue:59,
name: 'tagDurationMn',
id : 'tagDurationMn',
label: L.tagDurationHr,
labelCls:'fieldLabelClass',
labelWidth:135,
width:155,
clearIcon:true

},*/


// tag for travel zone
{
xtype: 'selectfield',
name : 'tagTravelZone',
id : 'tagTravelZone',
label: L.tagTravelZone ,
labelCls:'fieldLabelClass',
labelWidth:135,
usePicker:false,
store:me.getTravelZoneStore()
}


]},




{
xtype:'panel',
name:'warningMsgPanel',
id:'warningMsgPanel',
hidden:true,
layout:'vbox',
width:'100%',
//cls:'customMessagePanel',
cls:'customMessagePanel',
items:[
{
html:"<font color=red><b>WARNING!</b></font>",
margin:10
},
{
html:"Warning:sfsfsdfsdf<br> ",
id:'warningMsg',
//cls:'customMessagePanel',
//class:'customMessagePanel',
margin:10
},
{xtype:'spacer'},
{
xtype:'panel',
id:'buttonPanel',
layout:'hbox',
items:[
{xtype:'spacer'},
{
xtype:'button',
ui:'confirm',
id:'confirmButton',
text:'YES'
},
{xtype:'spacer'},
{
xtype:'button',
ui:'decline',
id:'declineButton',
text:'NO'
},
{xtype:'spacer'}
]

}

]

}
39865

mitchellsimoens
6 Nov 2012, 9:23 AM
Can't really read your test case as it's not in BBCode CODE tags so I created this test and it works fine for me:


Ext.Viewport.add({
xtype : 'formpanel',
items : [
{
xtype : 'fieldset',
title : 'Test',
layout : {
type : 'hbox',
align : 'stretch'
},
items : [
{
xtype : 'textfield',
label : 'One',
flex : 1
},
{
xtype : 'textfield',
label : 'Two',
flex : 1
}
]
}
]
});

ramannachekuri
6 Nov 2012, 11:02 AM
Hi Mitchel,
I dont want to set HBOX to whole fieldset. I want to have whole fieldset in VBOX and few of the fields in fieldset should be in HBOX. If you look at my code you can see that. I am trying to create a simple test program to reproduce it. Will upload it once I have it.

Thanks,
Ramanna

ramannachekuri
6 Nov 2012, 11:14 AM
//<debug>
Ext.Loader.setPath({
'Ext': '../../src'
});
//</debug>


/**
* This example is a simple demo of some of the form and field components in Sencha Touch.
* It also shows how you can bind a Model instance to a form, and then update that instance with values
* from the form panel.
*/


/**
* Here we define a User model. An instance of this model will be used to load data into our form
* panel. We will also update this form panel when you press the submit button.
*/
Ext.define('User', {
extend: 'Ext.data.Model',


config: {
fields: [
{ name: 'name', type: 'string' },
{ name: 'password', type: 'string' },
{ name: 'disabled', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'bio', type: 'string' },
{ name: 'url', type: 'string' },
{ name: 'date', type: 'date' },
{ name: 'number', type: 'integer' },
{ name: 'height', type: 'integer' },
{ name: 'enable', type: 'integer' },
{ name: 'spinner', type: 'integer' },
{ name: 'rank', type: 'string' },
{ name: 'enable', type: 'boolean' },
{ name: 'cool', type: 'boolean' },
{ name: 'color', type: 'string' },
{ name: 'team', type: 'string' },
{ name: 'secret', type: 'boolean' },
{ name: 'single_slider' },
{ name: 'multiple_slider' }
]
}
});


// Define our simple application
Ext.application({
// Setup the icons and startup screens for phones and tablets.
startupImage: {
'320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
'640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
'640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
'768x1004': 'resources/startup/768x1004.png', // Non-retina iPad (first and second generation) in portrait orientation
'748x1024': 'resources/startup/748x1024.png', // Non-retina iPad (first and second generation) in landscape orientation
'1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
'1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
},


isIconPrecomposed: false,
icon: {
57: 'resources/icons/icon.png',
72: 'resources/icons/icon@72.png',
114: 'resources/icons/icon@2x.png',
144: 'resources/icons/icon@144.png'
},


// Require the components we will be using in this example
requires: [
'Ext.form.*',
'Ext.field.*',
'Ext.Button',
'Ext.Toolbar',


'Ext.data.Store'
],


/**
* The launch method of our application gets called when the application is good to launch.
* In here, we are going to build the structure of our application and add it into the Viewport.
*/
launch: function() {
// Get all the items for our form.
var items = this.getFormItems(),
config, form;


// Create the configuration of our form.
// We give it the `formpanel` xtype and give it the items we got above.
config = {
xtype: 'formpanel',
items: items
};


// If we are on a phone, we just want to add the form into the viewport as is.
// This will make it stretch to the size of the Viewport.
if (Ext.os.deviceType == 'Phone') {
form = Ext.Viewport.add(config);
} else {
// If we are not on a phone, we want to make the formpanel model and give it a fixed with and height.
Ext.apply(config, {
modal: true,
height: 505,
width: 480,
centered: true,


// Disable hideOnMaskTap so it cannot be hidden
hideOnMaskTap: false
});


// Add it to the Viewport and show it.
form = Ext.Viewport.add(config);
form.show();
}


this.form = form;
},


/**
* This method returns an array of all items we should add into the form panel we create above in our launch function.
* We have created this function to simply make things cleaner and easier to read and understand. You could just put these items
* inline up above in the form `config`.
* @return {Array} items
*/
getFormItems: function() {
return [
{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [

{
xtype: 'textfield',
name: 'name',
label: 'Name',
autoCapitalize: false
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
},
{
layout : {
type : 'hbox',
align : 'stretch'
},
items : [
{
xtype : 'textfield',
label : 'One',
flex : 1
},
{
xtype : 'textfield',
label : 'Two',
flex : 1
}

]


},
{
xtype: 'textfield',
name: 'disabled',
label: 'Disabled',
disabled: true
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email',
placeHolder: 'you@sencha.com'
},
{
xtype: 'urlfield',
name: 'url',
label: 'Url',
placeHolder: 'http://sencha.com'
},
{
xtype: 'checkboxfield',
name: 'cool',
label: 'Cool',
value: true
},
{
xtype: 'spinnerfield',
name: 'spinner',
label: 'Spinner'
},
{
xtype: 'selectfield',
name: 'rank',
label: 'Rank',
valueField: 'rank',
displayField: 'title',
store: {
data: [
{ rank: 'master', title: 'Master'},
{ rank: 'padawan', title: 'Student'},
{ rank: 'teacher', title: 'Instructor'},
{ rank: 'aid', title: 'Assistant'}
]
}
},
{
xtype: 'datepickerfield',
name: 'date',
label: 'Start Date',
value: new Date(),
picker: {
yearFrom: 1980
}
},
{
xtype: 'hiddenfield',
name: 'secret',
value: 'false'
},
{
xtype: 'textareafield',
name: 'bio',
label: 'Bio',
maxRows: 10
},
{
xtype: 'sliderfield',
name: 'height',
label: 'Height'
},
{
xtype: 'togglefield',
name: 'enable',
label: 'Security Mode'
},
{
xtype: 'radiofield',
name: 'team',
label: 'Red Team',
value: 'redteam'
},
{
xtype: 'radiofield',
name: 'team',
label: 'Blue Team',
value: 'blueteam'
}
]
},
{
xtype: 'fieldset',
title: 'Favorite color',
defaults: { xtype: 'radiofield' },
items: [
{ name: 'color', label: 'Red', value: 'red' },
{ name: 'color', label: 'Green', checked: true, value: 'green'}
]
},
{
xtype: 'fieldset',
title: 'HTML5',
items: [
{
xtype: 'numberfield',
name: 'number',
label: 'Number'
},
{
xtype: 'emailfield',
name: 'email2',
label: 'Email',
clearIcon: true
},
{
xtype: 'urlfield',
name: 'url2',
label: 'URL',
clearIcon: true
}
]
},
{
xtype: 'fieldset',
title: 'Single Select',
items: [
{
xtype: 'selectfield',
name: 'options',
options: [
{text: 'This is just a big select with text that is overflowing', value: '1'},
{text: 'Another item', value: '2'}
]
}
]
},
{
xtype: 'fieldset',
title: 'Single Text',
items: [
{
xtype: 'textfield',
name: 'single_text',
clearIcon: true
}
]
},
{
xtype: 'fieldset',
title: 'Single Toggle',
items: [
{
xtype: 'togglefield',
name: 'single_toggle',
value: 1
}
]
},
{
xtype: 'fieldset',
title: 'Single Slider',
items: [
{
xtype: 'sliderfield',
name: 'single_slider',
value: 60
}
]
},
{
xtype: 'fieldset',
title: 'Multiple Slider Thumbs',
items: [
{
xtype: 'sliderfield',
name: 'multiple_slider',
values: [40, 90]
}
]
},


// Create a docked bottom toolbar which will contain buttons to trigger various functions in our formpanel.
{
xtype: 'toolbar',
docked: 'bottom',
items: [
// Lets add a load button which will load the formpanel with a User model
{
text: 'Load Model',
ui: 'round',
scope: this,
handler: function() {
var form = this.form;


// Check if we have already created a user model yet. if we haven't, then lets create one.
if (!form.user) {
// Create a date for the datepicker field
var date = new Date();
date.setMonth(4);
date.setYear(1989);
date.setDate(1);


// Create a new instance of the User model with a bunch of fake values.
form.user = Ext.create('User', {
name: 'Akura',
password: 'secret',
email: 'saru@sencha.com',
disabled: 'disabled',
url: 'http://sencha.com',
bio: 'Learned the hard way!',
number: 20,
height: 20,
spinner: 5,
enable: 1,
cool: true,
date: date,
team: 'redteam',
color: 'blue',
rank: 'padawan',
secret: true,
single_slider: 10,
multiple_slider: [20, 40]
});
}


// Set the record of the form to the User record instance.
form.setRecord(form.user);
}
},


{ xtype: 'spacer' },


// Here we add a reset button which will reset all fields within the form panel back to their original value
{
text: 'Reset',


// Ensure the scope is 'this' so we have access to the global 'form' instance
scope: this,
handler: function() {
// Call the form.reset method
this.form.reset();
}
},


// Finally we add a Save button which will mask the formpanel, and update the current record in the formpanel with
// the latest values from the formpanel.
{
text: 'Save',
ui: 'confirm',
scope: this,
handler: function() {
var form = this.form;


// Mask the form
form.setMasked({
xtype: 'loadmask',
message: 'Saving...'
});


// Put it inside a timeout so it feels like it is going to a server.
setTimeout(function() {
if (form.user) {
// Call the updateRecord method of formpanel with the user record instance. This will update the user record
// with the latest values.
form.updateRecord(form.user, true);
}


// Unmask the formpanel
form.setMasked(false);
}, 1000);
}
}
]
}
];
}
});

ramannachekuri
6 Nov 2012, 1:46 PM
Hi Mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens),
Did you get a chance to look at this issue?

Ramanna

mitchellsimoens
7 Nov 2012, 6:01 AM
Please give it more than 2 hours to reply. Also, will say again, please use BBCode CODE tags so I can read your code easily, it's not hard to do.

Looking at your code in 2.1.0 the One and Two fields are properly laid out. Here is a screen shot:

39887

gypsie
10 Apr 2013, 11:34 AM
Original poster is absolutely right. Placing formpanel into panel or container and then setting layout to vbox or hbox on both creates all kinds of problems. Form is literally invisible with that setup. Only what seems to be working is setting outer panel to vbox/hbox and inner just flex to 1. But this only works in web browser. Once loaded on iPad only left fields are visible. Changing inner formpanel to just panel fixes this for iPad but the togglefield stops working and toggle moves only 1/5th. I am on 2.1 commercial.