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',
}
Related
It seems ridiculous to have to ask this question - but here we go. How do you align a Label with a textfield horizontally?
I need:
Label Text
Label
TextArea
Here is my code. I've tried everything, including a labelField but the text does not appear in my view.
Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N
config: {
xtype: 'Ext.form.Panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffvoidview',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Void Buyoff',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Cancel',
idForAction: 'opbuyoff-void-cancel_btn',
}, {
xtype: 'spacer',
},{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Save',
idForAction: 'opbuyoff-void-save_btn',
}],
},
{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
padding: 5
},
items: [
{
xtype: 'label',
cls: 'block',
text: 'tesdfasrewaer'
},
{
fieldLabel: 'label',
labelWidth: 300,
xtype: 'textfield',
value: 'blahhhhh',
}, {
// xtype: 'panel' implied by default
xtype: 'textfield',
value: 'blahhhhhhhhhhh',
fieldLabel: 'text 2',
},{
xtype: 'textareafield',
width: 460,
height: 230,
idForUpdate: 'buyoff_reason_void',
//cls: 'priorityMedLabel',
}],
},
],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoffVoid.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
So far I understood from your question that you need structure like below:
Label Text
Label
TextArea
Put below items in your view file:
items: [{
xtype: 'fieldset',
title: 'Enter your name and bio',
items: [{
xtype: 'textfield',
label: 'Name',
name: 'name'
}, {
xtype: 'textfield', // This textfield is dummy.
label: 'Bio', // You can simply put html here
labelWidth: '100%' // And can put your css to mimic default sencha label
}, {
xtype: 'textareafield',
name: 'bio'
}]
}]
Here is the fiddle for ref. Let me know if it serves your purpose or not.
I have a layout somewhat like so:
Ext.define('MyApp.view.MyFormPanel', {
extend: 'Ext.form.Panel',
requires: [
'...'
],
xtype: 'myformpanel',
id: 'myFormPanel',
config: {
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
cls: 'my-form-panel',
items: [
{
xtype: 'container',
items: {
xtype: 'image',
mode: 'image',
width: 150,
height: 150
}
},
{
xtype: 'fieldset',
defaults: {
xtype: 'textfield'
},
items: [
{
itemId: 'titleTextfield',
cls: 'title-textfield',
placeHolder: 'Title',
name: 'title'
}
]
},
{
xtype: 'container',
height: 100
},
{
xtype: 'container',
height: 100
},
{
xtype: 'list',
infinite: true,
onItemDisclosure: true,
mode: 'MULTI',
flex: 1
}
],
listeners: [
{
...
}
]
}
});
I want to make sure that the list takes up its natural height without scroll inside of the list – instead, I want the whole form panel to scroll up. Right now, the list takes up only the space that is left after all the contents above it are laid out.
How can I achieve this? Help is much appreciated! Thanks!
It turns out that the solution is not straightforward. With help from ST forum, this worked:
{
xtype: 'list',
infinite: true,
// ...
items: [
{
xtype: 'formpanel',
scrollDock: 'top'
}
]
}
Basically, I had to put all my components as scollDocked to top – inside of the list. Hope this helps.
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.
How can I modify the Ext.Msg.show in sencha to show two text boxes.Right now it supports only one textbox when we set prompt:true
Ext.Msg.show({
title: 'Enter values',
width: 500,
buttons: Ext.Msg.OKCANCEL,
multiline: true,
prompt:true,
});
The easiest solution is just create a window. Like Evan said in the comment, the MessageBox is just an Ext.window.Window width a little extra..
a working fiddle
Here's a example definition:
Ext.define('MyApp.view.Login', {
extend: 'Ext.window.Window',
height: 220,
width: 490,
layout: 'fit',
modal: true,
buttonAlign: 'left',
closable: false,
items: [
{
xtype: 'form',
frame: false,
border: 0,
layout: {
type: 'hbox',
align: 'middle'
},
fieldDefaults: {
msgTarget: 'side',
labelWidth: 55
},
items: [
{
xtype: 'container',
flex: 1,
padding: 10,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false,
flex: 1
},
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false,
flex: 1
}
]
}
]
}
],
buttons: [
{
text: 'Login',
handler: function () {
Ext.Msg.alert('This is not yet implemented.').show();
}
}
]
});
Then you can just create and show the window:
Ext.create('MyApp.view.Login').show();
The msg property of the Ext.MessageBox will render as HTML, so you can tell it to show two HTML inputs and then use the values from these using something like
Ext.Msg.show(
{
title: 'Enter values:',
width: 500,
buttons: Ext.Msg.OKCANCEL,
msg: 'Value1: <input type="text" id="textInput1" /><br />Value 2: <input type="text" id="textInput2" />',
fn: function (button)
{
var value1 = document.getElementById('textInput1').value;
var value2 = document.getElementById('textInput2').value;
}
});
Although, depending on what you're trying to do, using a window as suggested may be a better solution
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.