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'}
]
}
});
Related
I am new to sencha touch, I am trying to display map in my sencha touch application. here comes the code
Ext.define("trackit.view.GoogleMaps", {
extend: 'Ext.Map',
config: {
mapOptions:{
//my map options
}
}
});
Ext.define("trackit.view.trackMap", {
extend: 'Ext.Panel',
requires: "trackit.view.GoogleMaps",
config: {
layout:'fit',
items: [{
docked: 'top',
xtype: 'toolbar',
ui: "light",
title: 'Track direction',
},
]
}
});
From the above code only toolbar is coming but not the map.Please help
It's because you only require trackit.view.GoogleMaps but not render it. Give your trackit.view.GoogleMaps view an xtype:
xtype: 'GoogleMaps'
Then render it as an item inside your trackit.view.trackMap view after your toolbar:
items: [
{
docked: 'top',
xtype: 'toolbar',
ui: "light",
title: 'Track direction',
},
{
xtype: 'GoogleMaps'
}
]
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.
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 have this problem that I can ref a button for control it. I don't understand the logic of Controllers, see my example code:
Ext.define('myMoney.controller.Inicio', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: '#loginForm',
logButton: '#logButton',
},
control: {
logButton: {
tab: "autenthic"
}
}
},
autenthic: function(){
console.log("Wazzup!?");
}
});
I have my view:
Ext.define('myMoney.view.Inicio', {
extend: 'Ext.form.Panel',
xtype: 'inicio',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password'
],
config: {
title: 'Inicio',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Money Tracker',
docked: 'top'
},
{
xtype: 'fieldset',
title: 'Inicio de Sesion',
id: 'loginForm',
instructions: '(Por favor coloca tu usuario y clave)',
items: [
{
xtype: 'textfield',
name: 'us',
label: 'Usuario'
},
{
xtype: 'passwordfield',
name: 'pw',
label: 'Clave'
}
]
},
{
xtype: 'button',
width: '50%',
centered: true,
text: 'Aceptar',
ui: 'confirm',
id: 'logButton'
}
]
}
});
What is wrong?
Instead of
tab: "autenthic"
write
tap: "autenthic"
I am trying to add images to a nested list using the getItemTextTpl method of NestedList. Can you please take a look at the following code and let me know how to fix it? This was developed using Sencha Architect. Thanks for your help.
Ext.define('myapp.view.ListContainer', {
extend: 'Ext.Container',
alias: 'widget.listcontainer',
config: {
layout: {
type: 'fit'
},
tpl: [
''
],
items: [
{
xtype: 'nestedlist',
id: 'myList',
itemId: 'mynestedlist4',
detailCard: {
xtype: 'mytabs'
},
store: 'myStore',
toolbar: {
xtype: 'titlebar',
docked: 'bottom',
ui: 'dark'
}
}
],
listeners: [
{
fn: 'getItemTextTpl',
event: 'getItemTextTpl',
delegate: '#myList'
}
]
},
getItemTextTpl: function(node) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Ext.define('myapp.view.myList', {
extend: 'Ext.dataview.NestedList',
alias: 'widget.mynestedlist',
config: {
id: 'myList',
detailCard: {
xtype: 'mytabs'
},
displayField: 'text',
store: 'myStore'
},
getItemTextTpl: function(recordnode) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Just a quick tip. FontAwesome is a great way to add beautiful icons easily to you application.