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.
Related
I have button on the first item of carousel on the Main View.
Button is managed by ButtonController and opens Form.
This form have tools: close, hide. When I click on close or hide tool on the forms after, for example closing I see white artifact. This looks like mark of header of Form..
enter image description here
Maybe this can be decided by trivial action?
Thanks
UPD: some code.
part of controller:
Ext.define('Foresto.view.main.ButtonController', {
extend: 'Ext.app.ViewController',
alias: 'controller.comenuform',
layout: 'vbox',
requires: [
'Foresto.view.forms.1',
'Foresto.view.forms.2',
'Foresto.view.forms.3',
'Foresto.view.forms.4'
],
views: ['Foresto.view.main.Main'],
cutForms: function () {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: 'mainPart',
autoshow: true,
items: [{
xtype: 'formsType4'
}]
})
},
part of form:
Ext.define('Foresto.view.forms.Formf', {
extend: 'Ext.form.Panel',
title: 'testApp',
header: {
cls: 'header-cls',
},
tools: [
{type: 'minimize',
handler: function(){
this.up("panel").hide();
}},
{type: 'save'},
{type:'close',
handler: function(){
this.up("panel").close();
}},
],
xtype: 'formsType4',
url: 'save-form.php',
defaults: {
xtype: 'selectfield',
labelWrap: true,
afterLabelTextTpl: [
'<span style="color:red;font-weight:normal" data-qtip="Required">*</span>'
]
},
items: [{...
and code of main:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:'control-panel',
xtype: 'app-main',
controller:'comenuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
],
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'MyApp'
}
},
tools: [{
type: 'menu',
handler: function(me) {
var cp = me.down('panel');
if (cp._hidden)
cp.show(true);
else
cp.hide(true);
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
layout: {
type: 'vbox',
align: 'middle',
pack: 'center'
},
cls: 'colorful2',
defaults: {
border: true,
ui: 'light',
flex: 1
},
items:[{
xtype:'button',
cls: 'button-cls',
text: 'buttonOfForm4',
id: "RenterId",
margin: 10,
width: 920,
height: 250,
length: 150,
handler: 'renterForms'
... (some other buttons, which call forms too)..
I'm using ExtJs 6.
How can I achieve to have the layout of a FieldContainer, to act exactly like the form layout.
See my fiddle: https://fiddle.sencha.com/#fiddle/15v5
I would like that the size of my textfield which are in the FieldContainer has exactly the same size of the first textfield.
Please also not that I put textfield inside my FieldContainer but I want the same think for every type of component to my be in the FieldContainer.
Thanks in advance!
change layout of your form panel
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
items: {
padding: 5,
xtype: 'form',
layout: {
type:'vbox',
align:'stretch'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name'
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Test',
layout: 'form',
//layout: {
// type:'vbox',
// align:'stretch'
//},
// combineLabels: true,
items: [
{
itemId: "in",
xtype: 'textfield'
}, {
itemId: "in2",
xtype: 'textfield'
}
]
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Test2',
layout: 'form',
//layout: {
// type:'vbox',
// align:'stretch'
//},
// combineLabels: true,
items: [
{
xtype: 'component',
style: {
border: '1px solid red'
},
html: 'something'
}
]
}
]
}
})
}
});
This seems elementary, but I need to be able to refresh a view after a Web Service call.
The data on the screen is not tied to a store because it is dynamically built at runtime.
Here is my view:
Ext.define('CAMSApp.view.OpBuyoffView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffview'], //ToDo Use I18N
config: {
xtype: 'panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffview',
id: 'opBuyoffTableContainer',
layout: {
type: 'vbox',
align: 'center',
},
defaults: {
minHeight: 46
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Buyoffs',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Close',
idForAction: 'opbuyoff-cancel_btn',
}, {
xtype: 'spacer',
}],
},
{ id: 'opBuyoffToolbar',
xtype: 'container',
layout: {
type: 'hbox',
align: 'left',
},
items: [
{
xtype: 'button',
cls: 'blueRoundedBtn',
text: 'Buyoff',
idForUpdate: 'opbuyoff-buyoff_btn',
disabled: true
},
{ xtype: 'spacer',
minWidth: 480
}]
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'label',
style: 'border:1px solid black',
cls: 'opBuyoffTableHeader',
},
id: 'tabOfBuyoffs',
items: [{
html: '',
minWidth: 60
}, {
html: 'Buyoff',
minWidth: 250
}, {
html: 'Partial %',
minWidth: 100
}, {
html: 'Completed',
minWidth: 120
},
{
html: '',
cls: 'opBuyoffTransparent',
minWidth: 50
}
]
}],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoff.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
I have tried reading the View and the Container - but neither elements have doLayout() or refresh() functions.
The containers and panels do have a method called update(Ext.AbstractComponent-method-update) which can be used to update a view's HTML content.
Also, you can use XTemplate for creating the items and bind the panel to a store. In that case you won't have to manually remove and add all the elements.
refresh: function() {
// Ext.StoreMgr.get('stream').load();
// here I'd like to reload the app instead
// not just the store
window.location.reload();
}
I am making the screen as in picture and as in code below. Note that the vertical scrolling is only functional on the listview. Is there a way in which I can make the vertical scrolling operate across the entire window - so that the picture and the profile text on top disappear and not stay in the viewport always when scrolling?
Ext.define('Volt.view.FeedView', {
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'Ext.Button',
'Ext.Toolbar',
'Volt.view.FeedListView'
],
xtype: 'feedViewCard',
config: {
iconCls: 'home',
title: 'FeedView',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
title: 'Home',
docked: 'top',
items: [
//2 buttons here
]
},
{
// profile summary at top
xtype: 'container',
flex: 1,
layout: 'hbox',
items:[
{
//picture of user
xtype: 'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
flex: 1
},
{
//text and EM count
xtype: 'container',
flex:2,
html:'profile text and earthmiles count'
}
]
},
{
xtype: 'list',
//more code here
}
]
},
});
Make the whole panel scrollable, like this:-
Ext.define('Volt.view.FeedView', {
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'Ext.Button',
'Ext.Toolbar',
'Volt.view.FeedListView'
],
xtype: 'feedViewCard',
config: {
iconCls: 'home',
title: 'FeedView',
scrollable: 'vertical', // or true
...
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',
}