In ExtJS 5, I wanna remove border of textfield and make it like this:
Of course it can be done by two labels, but it's not very clean. I tried following two ways on ExtJS5 official website, but it doesn't work:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
// here 1
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
border: 0, // set border = 0 or false
hideBorders: true
}, {
// here 2
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
style: 'border: none;background-image:none;' // set style border none
}]
});
Results:
Anybody who have any idea? Thanks.
If you absolutely need to use the textfield xtype, you can remove the border by clearing the inputWrapCls config. Some Ext JS themes add a border to the div wrapping the input element (and any trigger buttons), so you may have to clear the triggerWrapCls config as well.
You will likely also want to modify the fieldStyle config to remove the input element's background:
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
// remove default styling for element wrapping the input element
inputWrapCls: '',
// remove default styling for div wrapping the input element and trigger button(s)
triggerWrapCls: '',
// remove the input element's background
fieldStyle: 'background:none'
}
Try with displayfiled in place of textfiled
for reference go through the link. http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.Display.html
Related
I can't find a way to on/off check box in runtime in my fieldset definition:
{
xtype: 'fieldset',
title: 'Do you want to add text file?',
itemId: 'chorFileCheck',
checkboxToggle: true,
items: [
{
xtype: 'filefield',
name: 'document',
fieldLabel: 'File',
labelWidth: 50,
allowBlank: false,
anchor: '100%',
regex: Portal.Const.DOC_ACCEPTED,
buttonText: 'Choose ...'
}
],
listeners: {
I can handle this check box by hand but can't find a way to do it in my code (make it in runtime). Prompt me please how to do it.
You need to use collapse() and expand() methods of fieldset to uncheck & check the checkbox respectively.
For Unchecking the checkbox:
Ext.ComponentQuery.query("#chorFileCheck")[0].collapse();
For Checking the checkbox:
Ext.ComponentQuery.query("#chorFileCheck")[0].expand();
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
I am trying to add an item into a fielset dynamically. I have checked the items of the fieldset in the console , the item is being added to the fieldset but it is not being displayed, I am invoking the doLayout() method for the fieldset and also for the formpanel which has this fieldset, but the size/height of the fieldset does not change. Can someone help me with this issue?
if(csType.value=="OS"){
Ext.apply(newOs,that.osCombo);
newOs.id = 'testOs2';
Ext.getCmp('cSFieldSet').add(newOs);
Ext.getCmp('cSFieldSet').setHeight(600);
Ext.getCmp('cSFieldSet').doLayout(true,true);
Ext.getCmp('cSFieldSet').ownerCt.doLayout(true,true);
that.csFormPanel.doLayout(true,true);
}
I also tried using autoHeight: true, but still the item is not being displayed
Here's some test code I just wrote to simulate what you are trying to achieve:
var simple = new Ext.FormPanel({
labelWidth: 75,
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
// Fieldset in Column 1
xtype:'fieldset',
itemId: 'fieldSetTest',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: false,
autoHeight:false,
defaultType: 'textfield',
items :[{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}
]
}
],
buttons: [{
text: 'Add New Field',
handler: function() {
var newItem = new Ext.form.TextField({fieldLabel: 'New Fields'});
simple.getComponent('fieldSetTest').add(newItem);
simple.doLayout();
},
scope:this
}]
});
simple.render(document.body);
});
This works fine, so on clicking the add button the new item appears in the fieldset and the height of the fieldset automatically increases. Without seeing your whole formpanel code I can't comment much further.
I would like to change the color of a ExtJS textfield, but I don´t succeed. The label is the component that gets the color:
var textfield= Ext.create('Ext.form.Text',
{
id: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [textfield]
});
Example:
http://jsfiddle.net/3ZZcZ/
How do I change the color?
You need to set fieldStyle instead of style. You also need to override the Ext JS default, which sets a background image on the field. Like this:
fieldStyle: 'background-color: #ddd; background-image: none;'
A better way to approach this is to set the fieldCls attribute to a CSS class.
Like this:
Field Config:
fieldCls: 'required'
CSS:
.required {
background-image:none;
background-color:#FFFFCC;
}
You can do it in many ways
Option 1(Global): Change the SASS variable value of "Ext.form.field.Text"
eg: $form-text-field-color: #003168 !default;
Option 2: Create a mixin
eg:
file -> sass/src/form/field/Text.scss
#include extjs-text-field-ui(
$ui: 'customName',
$ui-color: #003168
);
js:
{
xtype: 'textfield',
ui: 'customName'
}
Option 3: use form field's "fieldStyle" config
eg:
{
xtype: 'textfield',
fieldLabel: 'Test Label',
fieldStyle: 'font-weight: bold; color: #003168;',
labelWidth: 170
}
Option 4: add "cls" to form field and add your style to your css file
eg:
js:
{
xtype: 'form',
defaults: {
cls: 'test-class'
}
}
CSS:
.test-class .x-form-text {
color: #003168;
}
Expanding on Vasiliy's answer. The style can be set dynamically as follows:
Ext.get('textfield').setStyle('background-color','#ddd');
Ext.get('textfield').setStyle('background-image','none');
I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items