For some reason my form panel isn't showing. Can anyone help? I'm a newbie so sorry if this is obvious! It was build with Sencha Architect but I can't understand why no fields are showing in the form?...
Ext.define('MyApp.view.Login', {
extend: 'Ext.Container',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My Title'
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
text: 'Call'
},
{
xtype: 'button',
text: 'Email'
}
]
},
{
xtype: 'container',
flex: 1,
border: 2,
items: [
{
xtype: 'formpanel',
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
label: 'Field'
},
{
xtype: 'textfield',
label: 'Field'
}
]
}
]
}
]
}
]
}
});
To display formpanel (Ext.form.Panel) using Sencha Touch 2.3+ correctly inside other container you need to add scrollable: null property
{
xtype: 'formpanel',
scrollable: null,
items: [
...
]
}
See discussion here
Change the layout of your Login view from vbox to fit. Then set the layout of the container that contains your formpanel to fit also.
Check this link for more info about layouts in Sencha Touch.
Related
I have a problem to integrate map in this view:
Ext.define('Sample.view.MainMenu', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar','Ext.Video'],
alias: 'widget.mainmenuview',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to sencha' ,items: [
{
xtype: 'button',
text: 'Log Off',
itemId: 'logOffButton',
align: 'right'
}
]
},
html: [
"Hello to dawini plateforme"
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
], listeners: [{
delegate: '#logOffButton',
event: 'tap',
fn: 'onLogOffButtonTap'
}]
},onLogOffButtonTap: function () {
this.fireEvent('onSignOffCommand');
}
});
Can someone help me how to integrate map in this view and think you very much.
I am a developer with SIMpalm (www.simpalm.com), and I think you should try map type in your Sencha component within the Items. Others attribute also can be configured like height, current location etc. And also you need to configure google map api in your Index.html page like, .
Example : items: [
{
xtype: 'map',
height: 200,
useCurrentLocation: true
}
]
Here you can find how to include map in Sencha Touch. Though it is focused on infobubble but it is also showing the map integration. Let me know if you have any difficulty implementing this.
i am trying to give space between the components here is the screen shot , i want to give vertical space between lables , TextFields and button but i dont find a way to do it
here is my code
Ext.define('test.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Label'
],
config: {
items: [
{
docked: 'top',
title: 'Test',
ui: 'dark',
xtype: 'titlebar'
},
{
xtype:'panel',
style:'padding:10%',
items:[ {
xtype: 'label',
html: 'User Name/Mobile Number',
},
{
xtype: 'textfield',
},{
xtype: 'label',
html: 'Password'
},{
xtype: 'textfield',
},{
xtype:'button',
text:'Login'
}]
}
]
}
});
Use the margin property to get the space between fields:
{
xtype:'panel',
defaults: {
margin: '20 0'
},
items: [
{
xtype: 'label',
html: 'User Name/Mobile Number'
},
....
I'm not quite figuring out how to have a carousel between two other items, inside a container, with the carousel NOT having a set height but instead taking the space it requires depending on the size of the content of the active item. Example code:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'just need space for one line'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'need<br/>space<br/>for<br/>more<br/>lines'
}
]
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
}
]
}
});
For me it just collapses into nothing (not taking any space at all) if height isn't specified. Using Sencha Touch 2.
You need to set a layout to your container. You can find an intro to layouts here
Basically, you add this in your config :
layout:'vbox',
The VBox layout positions items horizontally in the container.
Then, in your carousel, just add :
flex:1
to tell it to take as much space at it can.
Example here
Hope this helps
Hey #TragedyStruck first you have understand your screen where you display your web app. Ok here we go, I did version of your code. The component Ext.Viewport.getSize().height take the necessary space for your element. This works for elements NOT fullscreen, if you want fullscreen elements, so you need to programmatically to make a function.
Ext.define('myapp.view.MyContainer', {
extend: 'Ext.Container',
xtype: 'mycontainer1',
config: {
scrollable: true,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'abc'
}
]
},
{
xtype: 'carousel',
style: 'background-color: red',
height: Ext.Viewport.getSize().height,
renderTo: document.body,
items: [
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'just need space for one line'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'need<br/>space<br/>for<br/>more<br/>lines'
}
]
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'def'
}
]
},
{
xtype: 'container',
items: [
{
xtype: 'label',
html: 'ghi'
}
]
}
]
}
});
I hope this helps. :)
I'm starting to play around with sencha touch 2 and ran into the following problem.
I'm trying to build a very simple application which has a listview and a tabpanel with a button :
I'm seeing the tabpanel with my button and nice title; but the listview refuses to show; i've tried adding 'layout: fit' but it's even worse.
What 'obvious' thing am I missing here ?
Main.js:
Ext.define('CurrencyFX.view.Main', {
extend: 'Ext.Panel',
requires: [
'CurrencyFX.view.Home',
'CurrencyFX.view.CurrencyList',
],
config: {
items: [
{ xtype: 'homecard' },
{ xtype: 'currencycard' },
]
}
});
Home.js:
Ext.define('CurrencyFX.view.Home', {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar'],
xtype: 'homecard',
config: {
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Currency FX',
items: [
{
text: 'Refresh',
align: 'right',
action: 'reloadQuotes'
}
]
}
]
}
});
CurrencyList.js:
Ext.define('CurrencyFX.view.CurrencyList', {
extend: 'Ext.List',
requires: ['CurrencyFX.store.Currencies'],
xtype: 'currencycard',
config: {
itemTpl: '{name} is at {value}',
store: 'Currencies',
}
})
Can you add a height to the currencycard? This provides a quick check:
items: [
{ xtype: 'homecard'},
{ xtype: 'currencycard', height: 500 }
]
Here's a layout that will fill the screen (note that I moved docked: 'top' to here!!):
Ext.define('CurrencyFX.view.Main', {
extend: 'Ext.Panel',
requires: [
'CurrencyFX.view.Home',
'CurrencyFX.view.CurrencyList'
],
config: {
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'homecard',
docked: 'top'
},
{ xtype: 'currencycard'}
]
}
});
I am new to extjs 4.0 and trying to make a hbox layout containing a list and a form,but the form is not displaying properly, only labels are visible but textfield is not visible,please rectify the code
Ext.define("Screener.view.PharmacyView", {
extend: 'Ext.Container',
requires : [ 'Screener.view.Pharmacyform' ],
xtype: 'pharmacylist',
config: {
fullscreen: true,
layout: 'hbox',
title: 'Patient Assignments',
items: [
//our patient list is built on the Patients store, and has a title and sort button
{
xtype: 'list',
id: 'patientList',
itemTpl: '{lastname}, {firstname}',
store: Ext.create('Screener.store.Patients',{
storeId: 'patientStore'
}),
items:[{
xtype: 'titlebar',
docked: 'top',
title: 'Patients',
items:[{
xtype: 'button',
text: 'Sort',
id: 'sortButton',
align: 'left'
}]
}],
flex:1,
},
{xtype : 'pharmacyform',
flex:2
}
]
}
});
and the form is as follows
Ext.define("Screener.view.Pharmacyform", {
xtype:'pharmacyform', extend: 'Ext.form.Panel', config:{ items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name', placeholder: 'nametext'
},
]} });
You need to use the alias config to declare your own xtypes I believe, try this
Ext.define("Screener.view.Pharmacyform", {
extend: 'Ext.form.Panel',
alias:'widget.pharmacyform',