I am looking to get the "fieldLabel:" property of the textfield/checkbox to take priority over the xtype, in terms of layout. As you can see in the screen shot below, the text appears squished.
Here's a snippet of the code from my view:
bodyPadding: 30,
xtype: 'fieldset',
title: 'Account',
margin: '10 10 10 10',
items: [{
xtype: 'form',
layout: 'form',
items: [{
xtype: 'checkboxfield',
fieldLabel: 'Has registered for gift aid:',
name: 'giftAidFlag',
margin: '0 0 8 0',
listeners: {
change: function(cb, checked) {
Ext.getCmp('manageGiftAidPayers').setDisabled(!checked)
}
}
}, {
xtype: 'button',
anchor: '100%',
text: 'Manage gift aid payers...',
style: "width : 495px;",
margin: '10 0 8 0',
disabled: true,
id: 'manageGiftAidPayers'
}]
}]
So, essentially, the button enables once the box is ticked.
I need this to look a little more professional by the text taking priority, and spanning it's full width before the checkbox appears - any ideas? Not interested in a column layout. Is this going to be possible? Thanks in advance.
You are looking for config labelWidth in the checkbox field.
xtype: 'fieldset',
title: 'My Fields',
items: [
{
xtype: 'checkboxfield',
fieldLabel: 'Has registered for gift aid:',
labelWidth: 250,
boxLabel: 'Box Label'
},
{
xtype: 'button',
width: 495,
text: 'MyButton'
}
]
I am reading the extjs offical tutorial to create a login form, so I create following login form window:
Ext.define('MyApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'Ext.form.Panel',
'Ext.form.field.Display',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,
items: {
xtype: 'form',
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
}]
}
});
here is the screenshot:
Please notice the "Login" button, it was wrapped by a gray background, but it was padding 10px white space with window.
How can bodyPadding do not padding the bottom button withou white space with the parent window? Just Like following picture:
I am using extjs6
Move the bodyPadding from the window down to the form. The body doesn't include docked items.
Fiddle.
I have a panel holding a form. The form has fieldsets enclosing it. However, the fieldset is displaying as the same size of the panel holding the form even when the form contents are much smaller than the panel. I won't the fieldset to not stretch to the containing panel. I only want fieldset to be only as big as the form it is enclosing. However the fieldset takes the whole width of it's containing panel.
--Container for FormPanel
var win = new Ext.FormPanel({
xtype: 'form',
layout: 'form',
height: 200,
width: 300,
title: 'Testing',
items: [{
xtype: 'fieldset',
layout: 'hbox',
autoHeight:true,
autoWidth: false,
title: 'Fieldset',
defaults: {
border: false,
layout: 'form',
labelAlign: 'top',
labelSeparator: ''
},
items: [{
items: new Ext.form.TextField({
fieldLabel: 'Col1',
name: 'col1',
value: 'nothing',
})
}, {
items: new Ext.form.TextField({
fieldLabel: 'Col2',
name: 'col2',
value: 'something'
})
}]
},
new Ext.form.TextField({
fieldLabel: 'Col3',
name: 'col3',
value: 'anything'
})
]
}).show();
I've been trying to find an answer to this problem for the last 24 hours and couldn't find a way to resolve this. Here it is:
I'm using MVC architecture with ExtJS 4. I have a tabpanel that has some grid as items. When these grids load, they do not have a vertical scrollbar, even though I set autoScroll to 'true' and their content is bigger than the screen can show. Every post I read about this problem was resolved setting the grid's parent layout to 'fit', but, as you can see below, I already done it and still not have a scrollbar... If I define a height to the grid, the scrollbar works perfectly, but I need it to work with different heights...
I belive I might have a overnesting problem, but I just started developing with ExtJS some days ago and it stills a little confusing to me...
The question is: how can I make this structure work with autoScroll?
SO won't let me post an image here as my reputation is lower than 10, so you can find my app's structure here
Please note that I wrote "layout: 'fix'" in the image, but I meant "layout: 'fit'" :)
This is my Main view, which has 2 panels. The 'center' one is where I load the tabpanel that has the grid.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
// 'Ext.tab.Panel',
// 'Ext.layout.container.Border',
'MyApp.view.Menus'
],
xtype: 'app-main',
layout: {
type: 'border'
},
items: [
{
region: 'north',
xtype: 'panel',
padding: '5 5 0 5',
title: 'MyApp',
items: {
xtype: 'menus'
}
},
{
region: 'center',
itemId: 'centerPanel',
xtype: 'panel',
padding: 5,
layout: 'fit'
}
]
});
This is the view that have the fieldset and the tabpanel as items:
Ext.define('MyApp.view.licencas.List', {
extend: 'Ext.form.Panel',
xtype: 'licencaslist',
title: 'Licenças de software',
border: false,
items: [
{
xtype: 'fieldset',
title: 'Dados do Veículo',
margin: 5,
items: [
{
xtype: 'combobox',
anchor: '100%',
valueField: 'id',
displayField: 'descricao',
store: 'ComboEmpresas',
typeAhead: true,
queryMode: 'local',
name: 'empresa',
fieldLabel: 'Empresa'
},
{
xtype: 'combobox',
editable: false,
valueField: 'id',
displayField: 'descricao',
store: 'ComboSoftwares',
queryMode: 'local',
name: 'software',
fieldLabel: 'Software'
},
{
name: 'valor',
fieldLabel: 'Valor empresa:',
xtype: 'numberfield',
minValue: 0,
maxValue: 100000,
allowDecimals: true,
disabled: true,
},
{
name: 'contrato',
fieldLabel: 'Contrato:',
xtype: 'textfield',
disabled: true,
},
{
name: 'demonstracao',
xtype: 'checkbox',
fieldLabel: 'Demonstração',
disabled: true,
}
]
},
{
xtype: 'licencastabpanel',
border: false,
margin: 5
}
],
initComponent: function() {
this.callParent(arguments)
}
});
And finally this is the grid where I need the autoScroll property...
Ext.define('MyApp.view.licencas.placas.List', {
extend: 'Ext.grid.Panel',
xtype: 'licencasplacaslist',
store: 'EmpresaVeiculos',
border: false,
forceFit: true,
autoScroll: true,
plugins: [new Ext.grid.plugin.CellEditing({
clicksToEdit: 1,
})],
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Alterar todos',
iconCls: 'money-16',
action: 'alterartodos',
xtype: 'button'
},
'->',
{
xtype: 'trigger',
name: 'searchfieldLicencasPlacas',
itemId: 'searchfieldLicencasPlacas',
emptyText: 'Filtrar por placa...',
width: '500px',
hideLabel: true,
selectOnFocus: true,
triggerCls: 'x-form-search-trigger'
}
]
}
],
columns: [
Ext.create('Ext.grid.RowNumberer'),
{
text: "Placa",
dataIndex: 'placa',
width: 70
},
{
text: "Serial",
dataIndex: 'serial',
width: 70
},
{
text: "Condutor",
dataIndex: 'condutor'
},
{
text: "Ativo",
dataIndex: 'ativo',
width: 50
},
{
text: "Data Início",
dataIndex: 'data_inicio',
format: 'd.m.Y',
width: 60
},
{
text: "Data Fim",
dataIndex: 'dt_fim',
format: 'd.m.Y',
width: 60,
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
},
{
text: "Contrato",
dataIndex: 'contrato',
width: 70,
editor: {
xtype: 'textfield'
}
},
{
text: "Software",
dataIndex: 'valor_software',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comunicação",
dataIndex: 'valor_comunicacao',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comodato",
dataIndex: 'valor_comodato',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: 'Empresa para faturar',
dataIndex: 'fatura',
width: 200,
editor:
{
xtype: 'combobox',
displayField: 'descricao',
valueField: 'descricao',
store: 'ComboFaturas',
name: 'software',
queryMode: 'local'
}
}
],
initComponent: function() {
this.callParent(arguments)
}
});
Please, note that I removed all "layout: 'fit'" (except from the Main view, which has influence over other views) from the code as it wasn't working anyway... :)
Please, let me know if I need to provide you any extra information. I tried to make it easier to understand with the image below.
Thank you guys!
It works as follows:
grid ignores autoScroll config option
grid needs a height, either explicit or controlled by a layout of its parent container
if grid does not have a height, it tries to expand itself vertically according to the number of records loaded in the store so that it does not show the scrollbar
fit layout can only have one item - if it is a grid then its height (and width) is controlled by the size of the parent container
To summarize: If you want a grid to scroll it must have a height.
I have a container with a few different items stacked in. I also would like to have two title bars inside the container BUT with height reduced to 10 points. I have tried to reduce the size using setHeight() with a lesser number but I can't seem to achieve that. Am I missing something obvious?
Is there a way I can reduce the height of a toolbar/titlebar in Sencha Touch? Help!
UPDATE: Here is the code I use for a toolbar...
Ext.define('MyApp.view.CookingSteps', {
extend: 'Ext.Container',
alias: 'widget.CookingSteps',
config: {
height: '',
html: '',
id: 'CookingSteps',
itemId: 'CookingSteps',
style: '',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
height: 50,
html: '<b><center>AdBanner Goes Here',
style: 'background: gray;',
styleHtmlContent: true
},
{
xtype: 'container'
},
{
xtype: 'fieldset',
title: '',
items: [
{
xtype: 'textfield',
label: '',
placeHolder: 'Username'
},
{
xtype: 'textfield',
label: '',
placeHolder: 'Passphrase'
}
]
},
{
xtype: 'toolbar',
docked: 'top',
height: 20,
minHeight: '20',
title: 'Login'
},
{
xtype: 'container',
items: [
{
xtype: 'button',
centered: true,
ui: 'confirm',
width: 283,
text: 'Go Ahead :)'
}
]
}
]
}
});
I want the toolbar with title 'Login' with a reduce height.. Any help would be greatly appreciated. Thank you in advance. :)
If you need to adjust toolbar size use minHeight option with units in toolbar config. Here is a toolbar example with a 2x of current font size height.
{
xtype: 'toolbar',
docked: 'top',
minHeight: '2em',
}