PDA

View Full Version : How change class of dom element "filefield"



Denin2004
13 Mar 2012, 7:57 AM
Hello!
I have the same object:


Ext.define('UsersApp.lib.myUpload' ,{
extend: 'Ext.window.Window',
alias: 'widget.myUpload',
hidden: true,
modal: true,
closeAction: 'hide',
width: 300,
height: 300,
resizable: false,
setViewImage: function(imgSrc){this.items.items[0].update(
'<img class="imgViewMyUpload" src="'+imgSrc+'" />')},
setAddParams: function(prm){this.items.items[1].addParams = prm},
items:[{extend: 'Ext.panel.Panel',
xtype: 'panel',
bodyPadding: 10,
border: 0,
height: 160},
{extend: 'Ext.form.Panel',
xtype: 'form',
url: urlSite+'commonPHP/uploadPhoto.php',
addParams : '',
buttons:[
{buttonText:'????',
xtype: 'filefield',
buttonOnly : true,
name: 'iFile',
msgTarget: 'side',
anchor: '100%'},
{text:'?????',handler:function(){myUploadWindow.hide()}}]
}]
})


It look like.. (see pic1) - file button is flat.

When I manually change class from "x-btn-default-toolbar-small" to "x-btn-default-small"
file button look like "standart" button. (see pic2)
How can I do this programmatically?

Denin2004
13 Mar 2012, 10:46 AM
I solved this problem myself..
I change layout elements of my form...



Ext.define('UsersApp.lib.myUpload' ,{
extend: 'Ext.window.Window',
alias: 'widget.myUpload',

... some declarations

items:[{extend: 'Ext.panel.Panel',
xtype: 'panel',
bodyPadding: 10,
border: 0,
height: 160},
{extend: 'Ext.form.Panel',
xtype: 'form',

frame: true,
layout: {type: 'hbox',
padding:'5',
pack:'end',
align:'middle'},
items:[{buttonText:'????',
xtype: 'filefield',
buttonOnly : true,
name: 'iFile',
msgTarget: 'side',
width: 50,
hideLabel: true,
anchor: '100%'},
{xtype: 'button',
text:'?????'}]
}]
})