{
layout: {
type: 'hbox'
},
items: [
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
placeHolder: 'textfield'
}
]
},
I want to use 'hbox' layoout with selectfield and textfield for horizontal components using Sencha Touch 2.0
but like this image, underlines for second component(textfield) in fieldset are not seen. What's wrong?
screenshot
Hi its nothing with hbox layout and fieldset. Its is due to selectField.these lines are the border of selectField. If you want to remove it you need something like this
{
xtype: 'selectfield',
placeHolder: 'selectfield',
autoSelect: false,
border: 0,
},
this will make it disappear these line
i hope you get it ;)
here is a simple fiddle
And In case if you want to have borders follow this code
{
xtype: 'selectfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'selectfield',
autoSelect: false,
},
{
xtype: 'textfield',
border: 3,
style: 'border-color: blue; border-style: solid;',
flex: 1,
placeHolder: 'textfield'
}
Related
I'm unable to remove scrollbar in the textarea. Data for textarea is coming from a json file.
{
xtype: "fieldcontainer",
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 2,
items: [{
xtype: "textareafield",
name: "Message",
anchor: '100%',
grow:true,
scrollable: false,
value: widgetConfig.NOTES,
//width: "100%",
readOnly: true,
cls: "textareaStyles"
}]
}
scrollbar should be removed and the textarea height should auto increase
When you use grow:true in textareafield you have to adjust its height using growMin and growMax, in your case you are setting a height using flex:2
See a fiddle example
In my extjs 6.0.0.640, in my panel, I have a tab panel.. inside tab panel I have 2 grids. How do I stretch the grids vertically to fit inside the tab panel? basically stretching the height to fill vertically?
PROJECT CODE
Ext.define('ExtApplication4.view.performance.Performance', {
extend: 'Ext.panel.Panel',
xtype: 'app-performance',
controller: 'performance',
itemId: 'performanceItemId',
requires: [
'ExtApplication4.view.performance.PerformanceController',
'ExtApplication4.util.GlobalVar',
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Line',
'Ext.chart.series.Area'
],
title: 'Performance',
layout: {
type: 'fit'
},
items: [
{
xtype: 'tabpanel',
itemId: 'tabPanelId',
activeTab: 0,
//flex: 1,
//height: '100%',
items: [
{
title: 'Portfolio Level',
//layout: {
// type: 'vbox'
//},
items: [
{
xtype: 'grid',
title: 'Portfolio Level',
itemId: 'performancePortfolioLevelGridID',
bind: {
store: '{myPortfolioPerformanceStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
//height: 500,
flex: 1,
width: 975,
collapsible: false,
listeners: {
itemClick: 'onAccountClick'
},
features: [{
ftype: 'summary',
dock: 'bottom'
}],
columns: columns are here
},
{
title: 'Daily Portfolio Equity',
width: 975,
//height: 300,
flex: 1,
ui: 'featuredpanel-framed',
margin: '10px 0px 10px 0px',
xtype: 'chart',
theme: 'awesome2',
interactions: 'itemhighlight',
}
Your problem isn't the tabpanel. A tabpanel is already set to layout:'fit' by default.
It's the panel that contains the tabpanel. You should provide it with a fit layout as well, so that the tabpanel is sized to fill the panel.
Ext.create({
xtype: 'panel',
layout: 'fit'
I have a form panel created in EXtjs 4.1 in which there are 7 fieldsets. Default fieldset type is text field. Some of them are search box text fields. Form Panel has height specified. So if I scroll down to bottom of form panel and make change in fieldset (like searching for word and selecting one of the options form results), Scrollbar jumps a bit to top. This happens in update layout, Is there any way to prevent this?
My form panel code is as below.
Ext.define('MyApp.view.Form', {
extend: 'Ext.form.FormPanel',
overflowY: 'auto',
defaults: {
anchor: '98%',
msgTarget: 'side',
disabledCls: ''
},
disabledCls: '',
bodyBorder: false,
bodyPadding: '0 8 10 8',
border: '0',
waitMsgTarget: true,
frame: false,
fieldDefaults: {
labelAlign: 'top',
bodyPadding: 0,
labelSeparator: '',
msgTarget: 'side',
disabledCls: ''
},
defaultType: 'textfield',
items:[
{ xtype: 'item 1' },
{
xtype: 'item2'
},
{ xtype: 'item3'},
{ xtype: 'item4' },
{
xtype: 'item5'
},
{ xtype: 'item6' },
{ xtype: 'item7' }
]
});
This is happening for all fieldset changes.
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'
Question is simple.
I have a home screen where the north region has to display two textfields and one button to enable user to connect.
I have this code.
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
id: 'homescreen',
items: [
{
layout: 'border',
border: false,
height: 160,
anchor: '100%',
items: [
{
region: 'west',
// some codes here
},
{
xtype: 'container',
width: '70%',
region: 'east',
layout:
{
type: 'table',
columns: 1,
tdAttrs:
{
style: 'padding: 5px 15px 5px 15px;',
align: 'middle',
},
defaults:
{
width: 150,
textAlign: 'right'
},
},
items: [
{
xtype: 'textfield',
//fieldLabel: 'login',
labelWidth:50,
emptyText: 'Utilisateur',
margin: '18 0 0 0',
},
{
xtype: 'textfield',
//fieldLabel: 'mot de passe',
labelWidth:100,
emptyText: 'Mot de passe',
},
{
xtype: 'button',
html: 'Connexion',
scale: 'large',
},
]
}]
},
As you can see, all the textfields and the button are aligned vertically on one column.
But problem is that they are displayed on the left side of the container. How can I display them on the right (without using css) ?
= align them horizontally.
VBox layout would probably be more appropriated to your use case. It stacks component vertically and lets you control horizontal and vertical alignment of the resulting block.
Try the following layout, for example:
layout: {
type: 'vbox'
,align: 'center' // or 'right'
,pack: 'center' // controls vertical align
,defaultMargins: 5
}