I need to develop a view in Sencha Touch where some form fields, textarea & button have to be put just after a list; following is the source code:
Ext.define('myapp.view.MyNotes',{
extend: 'Ext.Panel',
xtype: 'admissionnotes',
requires: [
'myapp.view.MyAppTitle',
'myapp.view.MyList',
'myapp.view.MyForm',
'myapp.view.MyAppTabBar'
],
config: {
layout: 'fit',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'myapptitle'
},
{
xtype: 'myapplist'
},
{
xtype: 'myform'
},
{
xtype: 'myapptabbar'
}
]
}
});
The problem is that these form fields are overlapping my list. Can somebody assist to resolve this isssue?
Thanks
Maybe vbox layout would be more appropriated than fit?
layout: {type: 'vbox', align: 'stretch'}
Related
I added dockedItems to my form.Panel, it aligns to the form, but I want the dockedItems align to the table inside the form, how should I do.
Here is the demo: https://fiddle.sencha.com/#view/editor&fiddle/3kso
Thanks!
Since you set the viewport's layout to fit, and you also specify a fixed width for the table (300 px), the form is ordered to occupy the remaining area, and that's why the toolbar is at the left edge.
Although you could try to make the toolbar floating and align it the the table, I think it is easier to let the form take only the space it needs, and therefore the toolbar will we aligned to the form.
To do so, at the end of your fiddle, try this code to change the viewport's layout:
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
});
If you need the fit layout for some other reasons, you can keep the fit layout, and add the form within a container:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
Or if you need a panel that occupies all place, and you want a panel inside this with aligned toolbar, you can use and outside and an inside panel also (check the grey background to see the outside panel):
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
The important thing is that by using vbox and middle in the layout the form will only occupy the place it needs.
EDIT 1:
To address the issues in the comments, here is a complete example that can be run as fiddle:
const form = Ext.create('Ext.form.Panel', {
autoScroll: true,
bodyStyle: {
background: '#abd1ca'
},
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '300px',
'background': '#e3f2fd',
'border-collapse': 'collapse',
}
},
tdAttrs: {
style: {
border: '1px solid #ccc',
padding: '6px',
}
}
},
fieldDefaults: {
labelWidth: 40,
width: '100%',
},
items: new Array(100).fill({
fieldLabel: 'sample',
xtype: 'textfield'
}),
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [{
iconCls: null,
glyph: 61,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 88,
xtype: 'button'
}, {
iconCls: null,
glyph: 70,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 47,
xtype: 'button'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'hbox',
align: 'stretch',
pack: 'middle'
},
items: [form],
buttonAlign: 'center',
buttons: [{
text: 'Save',
handler: 'save',
}, ],
}]
});
I am using ExtJS 4.2.0 and testing on google chrome 42.0.2311.152 m. Here
is my fiddle:('ct' is nothing but just a div)
http://jsfiddle.net/5zpx4556/
Ext.define('SimpleGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.SimpleGrid',
columns: [
{
dataIndex: 'name'
}, {
dataIndex: 'status'
}, {
dataIndex: 'enabled'
}
],
store: {
fields: ['sex', 'name', 'status', 'enabled'],
data: [
{ sex: 'male', name: 'Tom', status: 'Available', enabled: true }
]
}
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
renderTo:'ct',
items: [
{
xtype: 'SimpleGrid'
}
]
});
I have already posted this as a bug in the sencha forum but would be great if someone could provide a workaround for this scenario if at all it is a bug.
Not sure of the align:'stretch' has anything to do with it but there should be no reason to render the extra column.
Any help appreciated.
Thanks.
It is not a column, it is just empty space left after rendering three columns. Add flex:1 to one of the columns to fill the width.
I have been developing an android application by sencha touch 2. Current weather and daily forecast were built in html type. I want hourly forecast will be shown in a horizontal scrollable panel, so I had to used DataView type (http://docs.sencha.com/touch/2.3.0/#!/api/Ext.dataview.DataView)
Unfortunately, I can't make it work in Android emulator. Please take a look at the screenshot below, to see the difference between emulator and chrome. I also didn't see any error in ADT and chrome console log.
http://i.stack.imgur.com/Mxzrt.png
Here is my sourcecode, these items are inside a card of a carousel. Thank you for your time to read my problem.
items: [{
height: '50%',
html: tplCurr.apply(obj)
}, {
height: '10%',
xtype: 'dataview',
cls: 'hourly-container',
scrollable: {
direction: 'horizontal',
directionLock : true
},
inline: { wrap: false },
data: obj.hourly,
itemTpl: tplHourly
}, {
height: '40%',
xtype: 'panel',
cls: 'daily-container',
fullscreen: true,
scrollable: {
direction: 'vertical',
directionLock : true
},
items: dayItems
}]
Try this please,
layout:{
type:'vertical'
},
items: [{
flex:4,
html: tplCurr.apply(obj)
}, {
flex:1,
xtype: 'dataview',
cls: 'hourly-container',
scrollable: {
direction: 'horizontal',
directionLock : true
},
inline: { wrap: false },
data: obj.hourly,
itemTpl: tplHourly
}, {
flex:2,
xtype: 'panel',
cls: 'daily-container',
fullscreen: true,
scrollable: {
direction: 'vertical',
directionLock : true
},
items: dayItems
}]
I'm having a problem with Sencha Touch 2 and vbox flexing. Here is my code for the Panel (modified for simplicity, real Panel is much more intricate but this is what it boils down to):
Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',
config: {
title: 'Test',
iconCls: 'home',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
flex: 2,
style: 'background-color: #f90;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #9f0;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #0f9;'
},
{
xtype: 'container',
flex: 2,
style: 'background-color: #90f;'
}
]
}
]
}
})
And here is my Main.js:
Ext.define("risbergska2.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'homeloggedinview'
},
{
xtype: 'myview'
},
{
xtype: 'programview'
},
{
xtype: 'socialview'
},
{
xtype: 'aboutview'
},
{
xtype: 'test'
}
]
}
});
My app.js:
Ext.application({
name: 'risbergska2',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'HomeLoggedIn', 'My', 'Program', 'Social', 'About', 'Test'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('risbergska2.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
If I run this code and go to the Test-panel, nothing is showing. I want it to show (in the test case) four different containers with four different colors in them, the top one and the bottom one being twice the vertical size of the middle ones.
Is this not the way to get that result? Where have I gone wrong?
Thanks!
Set layout : 'fit' for risbergska2.view.Test
Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',
config: {
title: 'Test',
iconCls: 'home',
layout : 'fit',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
thats weired - it worked and suddenly (changed nothing but adding code to other panels...) it's not working any more:
I used to enable/disable a form with a button inside a docked toolbar. within the handler ofthe button the disable/enable is triggered with a simple
formBase.enable();
but this is throwing the error
TypeError: Result of expression 'formBase.enable' [undefined] is not a
function.
now.
I don't get it....
any help would be great!
thx!
You probabilly have a scope issue, so you can't get your formBase variable from the button handler.
I post you a full working example I've done to let you understand how it is possible to enable / disable your form.
Ext.setup({
onReady: function() {
var form = new Ext.form.FormPanel({
scroll: 'vertical',
fullscreen: true,
url : 'postUser.php',
standardSubmit : false,
dockedItems: [{
xtype: 'toolbar',
title: 'Example',
items: [{
xtype: 'button',
text: 'Disable',
handler: function(){
form.disable();
}
},{
xtype: 'spacer'
},{
xtype: 'button',
text: 'Enable',
handler: function(){
form.enable();
}
}]
}],
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}]
}]
});
form.show();
}
});
Hope This helps.