PDA

View Full Version : Columns and radio group



iMacX
6 Mar 2010, 7:01 AM
Hi,

I'm facing a problem with my layout in ext js. See the attachment to illustrate the problem.
I have to replace the combo box to choose the default image by a radio button in face of each file upload field.

My problem is that each icon button are in columns and I don't know how to do to put a radio group.

Anhy ideas?


...,items: [{
xtype:'fieldset',
title: '<spring:message code="asset.imagesList"/>',
collapsible: true,
collapsed: false,
autoHeight:true,
defaults: {border: false},
items :[{
layout: 'column',
width:871,
defaults: {border: false,layout: 'form'},
items:[{
width:660,
items:[{
xtype: 'fileuploadfield',
width:500,
id: 'frontImage',
name:'frontImage',
emptyText: '<spring:message code="asset.selectAFile"/>',
fieldLabel:'<spring:message code="asset.frontImage"/>',
disabled: readOnly,
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
},
listeners: {
'fileselected':
function(assetId){
fireFieldChange(assetId,'frontImage');
}
}
}]
},{
width:28,
defaults: {border: false},
items: [{
xtype: 'button',
iconCls: 'viewButtonIcon',
id: 'viewfrontImageButton',
name: 'viewfrontImageButton',
handler:
function(){
viewAssetFile('img','frontImage');
}
}]
},{
width:28,
defaults: {border: false},
items: [{
xtype: 'button',
disabled: readOnly,
visible: !readOnly,
iconCls: 'deleteButtonIcon',
id: 'deletefrontImageButton',
name: 'deletefrontImageButton',
handler:
function(){
deleteAssetFile('img','frontImage');
}
}]
}]
},{
layout: 'column',
width:871,
defaults: {border: false,layout: 'form'},
items:[{
width:660,
items:[{
xtype: 'fileuploadfield',
width:500,
id: 'sideImage',
name:'sideImage',
emptyText: '<spring:message code="asset.selectAFile"/>',
fieldLabel:'<spring:message code="asset.sideImage"/>',
disabled: readOnly,
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
},
listeners: {
'fileselected':
function(assetId){
fireFieldChange(assetId,'sideImage');
}
}
}]
},{
width:28,
defaults: {border: false},
items: [{
xtype: 'button',
iconCls: 'viewButtonIcon',
id: 'viewsideImageButton',
name: 'viewsideImageButton',
handler:
function(){
viewAssetFile('img','sideImage');
}
}]
},{
width:28,
defaults: {border: false},
items: [{
xtype: 'button',
iconCls: 'deleteButtonIcon',
id: 'deletesideImageButton',
name: 'deletesideImageButton',
disabled: readOnly,
visible: !readOnly,
handler:
function(){
deleteAssetFile('img','sideImage');
}
}]
}]
}...