Have a question about changing anchor property dynamically...
I have some FormPanel, which contains one textfield, one panel and one textarea
for textarea I set "anchor : 100% -somevalue". Panel is added dynamically(when needed), so I want to change anchor property for textarea depending on whether Panel is added.
Use doLayout(). Example:
var p = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: '100%',
height: 200,
layout: 'anchor',
items:[{
title:'Item 1',
html:'100% 20%',
anchor:'100% 20%'
},{
title:'Item 2',
html:'50% 30%',
anchor:'50% 30%'
},{
title:'Item 3',
html:'-100 50%',
anchor:'-100 50%'
}]
});
setTimeout(function(){
p.items.items[0].anchor = '89% 20%';
p.doLayout();
}, 2000);
Working sample: http://jsfiddle.net/lolo/uN2w9/1/
Related
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
datefield in scrollable container is not rendering its picker properly. Here is the fiddle.
https://fiddle.sencha.com/#fiddle/17l8
Ext.application({
launch : function() {
Ext.create('Ext.container.Container', {
layout:'anchor',
scrollable:true,
width: 400,
height:'100px',
renderTo: Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// implicitly create Container by specifying xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'DOB'
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name: 'age',
fieldLabel: 'Age'
}]
});
}
});
Go to the fiddle, First enter the date, scroll down and enter name and age. Now again scroll to top and try to modify the date. Screen goes off. Screen will return when you give a mouse click.
PS: this is occuring only in EXt js 6. Not in any earlier version.
Figured it out...
in scorallable container, picker is not aligning to component after layout. We are doing it manually with the below override.
Ext.override(Ext.picker.Date, {
afterComponentLayout: function (width, height, oldWidth, oldHeight) {
var field = this.pickerField;
this.callParent([
width,
height,
oldWidth,
oldHeight
]);
// Bound list may change size, so realign on layout
// **if the field is an Ext.form.field.Picker which has alignPicker!**
if (field && field.alignPicker) {
field.alignPicker();
}
}
});
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.
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
I have a panel and the layout is hbox,I have two textfileds as items of the panel.
I am not able to view the fieldLabels when i execute .Please find the code
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'hbox',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
Note:I am working on Ext 3.2.1
Your layout should be form. From the api documentation:
fieldLabel config is only used when this Component is rendered by a
Container which has been configured to use the FormLayout layout
manager (e.g. Ext.form.FormPanel or specifying layout:'form').
As already said, the fieldLabel option will only apply in a form layout context (usually provided by the form panel).
As a quick fix, you can display your labels in BoxComponent:
Ext.onReady(function() {
var panel = new Ext.FormPanel({
title: "HBox Panel",
layout: 'hbox',
width: 300,
height: 200,
renderTo: document.body,
items: [{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 1:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
},{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 2:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
}]
});
});
Of course, it would be cleaner to create a CSS class for the custom styles, or even extend a new component from BoxComponent.
You can also generalize this logic in the parent panel's initComponent method, to create box components for the labels from the configured fieldLabel of the field (this way you could also set the for attribute of the label tag because you'll know the generated id of the field components at this time).
change the layout type to form,
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'form',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});