I have a fileuploadfield button that has an outline of a white box appearing behind it. Is there a way to remove this?
It seems to only be an issue in Extjs4.
Code
items: [{
xtype: 'form',
name: 'upload_form',
border: false,
items: {
text: 'File Upload',
xtype: 'fileuploadfield',
name: 'upload_btn',
buttonText: 'Upload File...',
buttonOnly: true,
hideLabel: true,
allowBlank: false,
clearOnSubmit: false,
}
}]
Fiddle
Since you must have the fileuploadfield inside a form, my workaround was to use a bodyStyle configuration in the form, set the background-color to transparent, and a margin-top to re-center the fileuploadfield.
Check out the fiddle
Related
I am using jqgrid (Guriddo jqGrid JS - v5.1.0)
My field becomes hidden when I add formoptions.
The field is 'hidden:true' because I want it to show on the form and not on the grid. When I remove the formoptions, the field shows on the edit form and hides on the grid.
colModel: [
{
label: 'First Name',
name: 'fname',
editable: true,
hidden: true,
width: 200,
editrules: {edithidden: true, required: true},
formoptions: {elmprefix:'(*)', colpos: 1, rowpos: 1 },
},
Can someone have an Idea what i am not doing right?
I was able to reproduce the problem. This is a bug. The problem is fixed in GitHub of Guriddo. Please check it.
I have a file select field component and a label that I want it to appear next to each other (label to the right). They are both populated inside a function. Is not the label of the field, just a text I want it to warn about file size on the upload field. This is the code:
this.fileUploadField = Ext.widget('filefield',
{
fieldLabel: 'Select a file:',
name:'file',
width: 200,
buttonText: 'Button' });
items.push(
this.fileUploadField,
{
xtype: 'label',
style: 'color:red',
text: 'I'm the label that wants to appear on the right of the file upload field',
name:'fileSizeLimit'
}
);
I would put them into some container and than set layout as hbox.
You can use for example
fieldcontainer
container
fieldset
You can use anything where you can set the layout. You can use the flex config to position your fields correctly.
So the code could look something like this:
xtype: 'fieldset',
title: 'My Fields',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'filefield',
flex: 3,
fieldLabel: 'Select file:'
}, {
xtype: 'label',
style: 'color:red',
flex: 2,
name: 'fileSizeLimit',
text: 'I\'m the label that wants to appear on the right of the file upload field'
}]
Check out this fiddle:
https://fiddle.sencha.com/#fiddle/1ju5
I use Ext5 and I have a question. Is it possible to remove text and add items into panel header after the panel collapsed?
Belows the code, the east panel is collapsible. I want to remove text and add items into header after it collapsed.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
UPDATE
In this case, I add buttons into header but when the panel is collapsed the button disappeared. Is there any way to show or add components into header when panel is collapsed?
{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150,
header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}
}
here is the fiddle
Thanks
Please refer to "placeholder" related configs in Ext.panel.Panel class. Below is your code from fiddle modified.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
collapseMode:'placeholder',// set collapseMode to placeholder
split: true,
width: 300,
placeholder:{ // Try different components and layout configs
width:100,
items:[{
xtype:'button',
text:'Button 1'
}]
}
/*header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}*/
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
The header you see collapsed is actually another instance of Ext.panel.Header created just for this purpose. I tried to find some configs to customize it, but the Ext.panel.Panel was not created having it in mind.
So you'll have to override the method which creates this reader, which I found out is called createReExpander. It's a big method hard to override without having to rewrite a lot of stuff, but it can be done.
I tried adding buttons to the header and the result was not visually nice, but at least they were created!
So I would suggest you use tools instead of buttons if you don't need text on them.
I am working with ExtJS and I have a textfield component.
I would like to disable only the inputEl of a textfield component (not the label).
If I use the setDisabled() method of the textfield, then it sets disabled the inputEl but also the label.
I have used also the setReadOnly() method, but it does not grey out the inputEl, only set as ReadOnly.
Is there a way to disable only the inputEl of a textfield component?
Thanks for your help.
You will have to set a custom class to the disabledCls
.ux-item-disabled .x-form-field, .ux-item-disabled .x-form-display-field, .ux-item-disabled .x-form-trigger {
filter: alpha(opacity=30);
opacity: .3;
}
see JSFiddle
What about this one?
items: [{
xtype: 'textfield',
name: 'item',
itemId: 'item',
readOnly: true,
listeners:{
afterrender: function(f){
c.inputEl.addCls('x-item-disabled');
}
}]
You could even make it change dicamically if you include an if befor apply the class
I have got another answer from the Sencha forum (I thought it may be interesting to post it here also)
Solution:
Use the setOpacity method
Ext.onReady(function () {
var panel =Ext.create('Ext.form.Panel', {
title: 'Basic Form',
renderTo: Ext.getBody(),
bodyPadding: 5,
width: 350,
items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField',
disabled: true
}]
});
panel.down('[xtype=textfield]').labelEl.setOpacity(1); });
I have the following situation. I have an Ext.form.field.File (With the buttonOnly: true on top of a Ext.form.Panel which is on top of a Toolbar docked on an Ext.grid.Panel. The result of that is, the button has a completely different style then the toolbar, and the Panel seems to have some white space around button that you can see. Anyone have any suggestions as to how I can fix this, so that the style of the button and panel matches the toolbar (I use default styles, didn't modify anything).
EDIT: here is some code:
upload_button = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: "Upload File",
hideLabel: true,
listeners: {..}
});
button_panel = Ext.create('Ext.form.Panel', {
region: 'south',
items: upload_button
});
upload_toolbar = Ext.create('Ext.toolbar.Toolbar',{
width: 400,
region: 'north',
dock: 'top',
items: [ button_panel]});
grid_file = Ext.create('Ext.grid.Panel', {
title: 'File List',
region: 'center',
height: 300,
store: store_file,
dockedItems: [upload_toolbar],
You are using regions, but I cannot see any border layout.
Your problem is that you are trying to put a panel within a toolbar - it won't work.
You better off just putting an hidden upload form somewhere in your page; putting a normal button in the toolbar, and have the toolbar button press triggering a press on the hidden form.
So this would be the hidden upload form definition:
Ext.define('App.view.Assignments' ,
{
extend: 'Ext.panel.Panel',
alias: 'widget.assignments-panel',
hidden: true,
items: [{
xtype: 'filefield',
id: 'uploadField',
emptyText: 'Select a file',
fieldLabel: 'Assignment',
name: 'assignment-path',
buttonText: '...',
buttonConfig: {
iconCls: 'upload-icon'
}
},{
xtype: 'hidden',
id: 'submissionIdField',
name: 'submissionId',
value: ''
}],
});
And then when the visible update button is pressed you can do:
var uploadField = Ext.getCmp( 'uploadField' );
uploadField.fileInputEl.dom.click();