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"
}
]
});
});
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
I've a 3rd-party component CompFoo to be added into an Ext.Tabpanel,
HTML:
<div id="div1">
</div>
<div id="div2">
</div>
and I render the CompFoo to div2, the tabpanel to div1.
var Foo = new MacroHard.bar.box({
...
renderTo: 'div2'
});
var tabs = Ext.createWidget('tabpanel',{
renderTo: 'input-div',
layout: 'fit',
height: '80%',
activeTab: 0,
items:[
{
title: 'User',
items: [
{
id: 'userid-txtfld',
xtype: 'textfield',
fieldLabel: 'User ID',
name: 'userid',
},
]
},
]....
What I want to do is to put my CompFoo into one of the tab.
Two ways:
1) Create a div with given ID into a tab, or 2) put the CompFoo into the 'items' of the TabPanel.
I don't know how to write the code in either way.
put into your items:{}
new Ext.Panel({id: 'someID',title:'someTitle',hmtl:'<your html>',...})
didn't test but should work
another way wich i'd prefer is using loader:{url:<url to the site you want to show>,renderer:'frame',...} instead of html in the panel
I have this view (DetailsContainer, first class in code section of this question) with two items inside (MetaDataPanel, Preview), but autoscroll doesn't work in MetaDataPanel (follow the code).
So when I put some items inside MetaDataPanel, autoscroll doesn't work...
PS: the content of MetaDataPanel is generated dinamically adding element to this Panel...
Any suggests?
Ext.define('DP.view.DetailsContainer' ,{
id: 'DetailsContainer',
extend: 'Ext.Panel',
alias : 'widget.DetailsContainer',
collapsible: true,
// margins:'5 0 5 5',
split:true,
layout: {
type: 'accordion',
align: 'stretch',
pack : 'start'
},
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'MetaDataPanel',
flex:1
},{
xtype: 'Preview',
flex:2
}]
});
this.callParent(arguments);
}
});
Ext.define('DP.view.MetaDataPanel' ,{
id: 'MetaDataPanel',
extend: 'Ext.Panel',
alias : 'widget.MetaDataPanel',
title : 'MetaDati',
layout: 'fit',
autoScroll:true, //TODO: autoscroll not working
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'component' ,
html: 'Nessun File o Cartella selezionata. Selezionare un elemento per visualizzare i metadati!',
margin: 5,
style: {
color: '#000000'
}
}]
});
this.callParent(arguments);
}
});
It doesn't make sense to specify autoScroll on a container with a fit layout. The child will always fit the size of the container, it will never be bigger, so you can never scroll. You want the autoScroll on the inner component.
I don't think it make sense for an accordion panel to scroll. What you should do instead is set the inner component to to scroll. Look at your code slightly changed to reflect that idea:
http://jsfiddle.net/dbrin/jmHEj/
Most easy (or lazy) is to set config autoScroll as a default - so that it will be inherited:
defaults: {autoScroll: true},
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/
i am developing one project with ui as pure extjs. I am facing one problem i want to add my own status message to the tabpanel in extjs only. please help me.
Each Component extending Ext.Panel accepts a config option called bbar which is the bottom Ext.Toolbar. this can function as a statusbar for your TabPanel if you want to. Check the docs on Ext.Panel and Ext.Toolbar for more info.
new Ext.Panel({
title: 'Basic StatusBar',
items:[{
xtype: 'button',
text: 'a button',
}],
bbar: ['->', 'Status bar']
});
If you are looking for more functionality you could also check out the official Statusbar Extension which you can find the official ExtJS Examples on sencha.com
Can you run it from Firebug console an ExtJS included page. It is not a good way for this but, achieves your need.
// this function should be in a namespace as a method
var updateStatusMessage = function(msg){
var msgEl = document.getElementById('tabPanelStatusMessage');
if (msgEl) {
msgEl.innerHTML = msg;
}
// style rules of span should be given with a css class
return Ext.DomHelper.createDom({tag:'span', id:'tabPanelStatusMessage', style: 'position: absolute; right: 5px; top: 5px', html: msg })
}
new Ext.Window({
title: 'test window',
width: 600,
height: 400,
items: {
xtype: 'tabpanel',
activeTab: 0,
id: 'statusTabPanel',
items: [
{
title: 'test',
html: 'this is a demo tab panel item'
}
]
},
listeners: {
afterrender: function(){
Ext.select('#statusTabPanel .x-tab-strip-wrap').appendChild(updateStatusMessage('Lorem Ipsum Dolor Sit Amet'))
}
}
}).show();
// you can call updateStatusMessage function with a message to update the message