I'm new to Sencha Touch 2.
I want to create a basic example, which has a container with 3 panels inside. But it seems that only first panel shows, two remaining are hidden. What's wrong? Here's my code:
Ext.create('Ext.Container',{
fullscreen: true,
layout: 'card',
items: [
{
xtype: 'panel',
html: 'first one',
},
{
xtype: 'panel',
html: 'second one',
},
{
xtype: 'panel',
html: 'third one',
},
]
});
If it can be done, how could I set them with equal widths?
Thanks for any help.
This is exactly what card layout is designed to do in Sencha Touch 2. Only the first child component is visible, while the others are hidden. To your question:
To show all panels: change layout config to hbox. Those 3 child panels will be arranged horizontally. Additionally, if you want them to be vertically set, use vbox
To set their relative width, use flex config. You should add flex:1 to all of your 3 panels and it should work.
Hope it helps.
Here's a working example. I think you want 3 vertical boxes on top of each other. If you change the vbox to hbox then the stripes will run top to bottom. I commented out the fullscreen option. I'm not exactly sure when it's needed.
app.js
Ext.application({
name: 'Sencha',
launch: function() {
var view = Ext.create('Ext.Container', {
// fullscreen: true,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
html: 'first one',
style: 'background-color: #fff',
flex: 1
},
{
xtype: 'panel',
html: 'second one',
style: 'background-color: #f00',
flex: 1
},
{
xtype: 'panel',
html: 'third one',
style: 'background-color: #0ff',
flex: 1
}
]
});
Ext.Viewport.add(view);
}
});
index.html
<!doctype html>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript"
src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
Related
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
Im trying to create a carousel where, apart of the active item, the user can preview part of the next and previous items. I made a draw to illustrate it:
I tried things like padding or margin, but anything works.
Here's a carousel to play with: http://jsfiddle.net/XpG8v/
Ext.Viewport.add({
xtype: 'carousel',
height: 300,
width: 300,
items: [{
style: 'background-color: #00ffff;'
},{
style: 'background-color: #ff00ff;'
},{
style: 'background-color: #ffff00;'
}]
});
Thanks!
Simply set the 'itemLength' config to a fixed value, for example:
Ext.Viewport.add({
xtype: 'carousel',
itemLength: 200,
// ...
});
In Rally App SDK 2.0, I would like to show a dropdown and button in line, and a chart below. The button would export (save as) the chart as a jpeg.
1) how do I specify the div to render objects to? The below code ignores the renderTo
2) is there sample code for exporting a jpeg image? using Canvas generates error
this.add({
xtype: 'rallycombobox',
fieldLabel: 'Select an Enterprise Release',
width: '500px',
renderTo: Ext.get("dropdownDiv"),
storeConfig: {
autoLoad: true,
model: 'Program',
fetch: 'Name,Releases,ReleaseStartDate,ReleaseDate',
sorters: [
{
property: 'Name',
direction: 'ASC'
}
]
},
listeners: {
select: this._onSelect,
scope: this
}
});
this.add({
xtype: 'rallybutton',
text: 'Export',
renderTo: Ext.get("buttonDiv"),
handler: function() {
var canvas = document.getElementById("chartDiv");
var img = canvas.toDataURL("image/jpeg");
// .toDataURL generates error, TypeError: canvas.toDataURL is not a function
document.write('<img src="'+img+'"/>');
}
});
this.add({
id: 'chartCmp',
xtype: 'rallychart',
renderTo: Ext.get("chartDiv"),
flex: 1,
chartConfig: chartConfig
});
// here is the body statement, removed <> so it will show
body
table
tr
td
div id="dropdownDiv" style="height:50px; width:500px;"/div
/td
td
div id="buttonDiv" style="height:50px; width:50px;"/div
/td
/tr
/table
div id="chartDiv"/div
/body
In Ext there are two ways to get a component rendered. The first is by adding a config object with an xtype to a container. That would be the this.add(); lines in your app. The second is by instantiating the component using Ext.create and specifying a renderTo in its config.
this.add({xtype: 'component', html: 'hello world'});
Ext.create('Ext.Component', { html: 'hello world', renderTo: 'aDiv' });
The preferred way is the first since then your component participates in the layout of the app. Also the preferred way for creating dom elements in an app (especially for initial layout) is through the items config rather than static html in the app body.
So:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{ xtype: 'container' itemId: 'dropdownDiv' },
{ xtype: 'container', itemId: 'chartDiv' }
]
});
And then you can add content in the launch method like so:
this.down('#chartDiv').add(chartConfig);
As far as your canvas question goes I'm not sure. You may want to post that as a separate question with more details on the specific error.
I am using Sencha Touch in my iPhone app. When I use up to three cards, my carousel works fine. But as soon as I use four cards, there is a bug:
The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.
(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)
What is going on here? I don't understand. Has anyone else met this kinda of error? Is it a real bug or a mistake in my codes?
This is my js:
Ext.setup({
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
cls: 'tab1',
html: 'Tab 1'
},
{
cls: 'tab2',
html: 'Tab 2'
},
{
cls: 'tab3',
html: 'Tab 3'
},
{
cls: 'tab4',
html: 'Tab 4'
}]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
}
});
EDIT: If you can get a working carousel with 4+ tabs, you would already prove that I have done something wrong.
Couple of possibilities here:
The use of vbox could be confusing it (though this is unlikely). Consider switching your panel configuration to just say:
new Ext.Panel({
layout: 'fit',
items: carousel
});
This could be related to a similar and slightly obscure issue we'd seen in 1.x. Try this:
Open resources/scss/application.scss and move line 23 (#include sencha-carousel;) down 4 lines so that it ends up just after the sencha-layout line
run compass compile to recompile your SASS
If it's the same issue as I saw a while back (no guarantee that it is), this will fix it
I have a page that I would like to use some sencha items on along with some non-sencha html.
So the page might be...(after loading sencha headers)
<div id="banner"><h1>#if (Model != null)
{#Model.DisplayName}</h1></div>
<div style="background-color: #CFE1E8; padding: 10px; border: 1px solid black; ">
<div id="buttonDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/button.js"></script>
<div id="searchDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/search.js"></script>
<div id="carouselDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/carousel.js"></script>
<div id="panelDiv"></div>
<script type="text/javascript" src="/Content/js/widgets/panel.js"></script>
</div>
Each of the js files contains some sencha code to render the control into the associated div. For example:
Ext.setup({
fullscreen: false,
onReady: function () {
var panel = new Ext.Panel({
title: 'Message Title',
fullscreen: false,
renderTo: 'buttonDiv',
defaults: {
// applied to each contained item
width: 120
},
items: [
{
xtype: 'button',
text: 'Click Me',
handler: function () {
alert("You Clicked Me...");
}
}
]
});
}
});
The problem I'm having is that when the page is taller than the width of the phone, anytime I touch the screen, the page immediately jumps to the bottom of the page. The normal page scrolling doesn't work at all.
Any suggestions? Thanks.
Try assigning your components a layout and possibly a flex, e.g.:
layout: {
type: 'vbox',
align: 'stretch'
},
and
flex: 1
For scrolling, you could try:
scroll: 'vertical'
Also, another way of using HTML inside sencha is to use the html property in your components, e.g:
new Ext.Panel({
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1
items: [{
html: 'HTML content inside a panel',
}]
});
I ended up doing two things:
Added an Ext.util.Scroller on the body. There's a bug with the Ext.util.Scroller on iPhones that it won't actually let you scroll upwards. Works fine on Androids though.
"Registered" the content of each module's js as a function by pushing to a global variable so that it would get added in the head and then executed them all in a loop, so I only ran Ext.Setup once.