PDA

View Full Version : Loading Carousel and Tab content into an element other than the body



9 Sep 2011, 6:39 AM
Hi All

Iím relatively new to the Sencha world and was wondering if anyone could help me. I have a couple of pages that I am developing, and I want to include the carousel and tab functionality, which I can get to work, but the take up the whole page.

I can see that the carousel and tabs are loaded into the body of a page is it possible to load the content in to another element in the page so that I can include a header and navigation panel above it? Iíve tried but to no avail, Iím sure itís something really simple that I have overlooked but any help on this would be greatly appreciated.

Many Thanks

NickT
9 Sep 2011, 7:11 AM
there is a renderTo config attribute that allows you to specify a DOM Element or the Dom Element's id, which will result in the component rendering inside of that element.

12 Sep 2011, 7:24 AM
Hi NickT

Thanks for this, I just want to make sure that I'm updating the correct attribute.

Is it this one this.renderTo = document.body on line 13534 of the sencha-touch.js file? As when I update this to
this.renderTo = document.getElementById('contentHolder'); (this the id of the div I want to populate with the carousle). It has no effect.

Many Thanks

NickT
12 Sep 2011, 7:50 AM
That is the attribute, however you dont want to change it in that js file. You can override that config attribute inline when you instantiate controls. Here is an example html page that creates a table with 3 cells and then on ready, it loads an ext panel into the middle cell by using renderTo




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="lib/sencha/autotheme.js"></script>
<script type="text/javascript" src="lib/sencha/sencha-touch-debug.js"></script>
<link href="lib/sencha/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
table.sample {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}
table.sample th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
table.sample td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
</style>
</head>
<body>


<div id="div1">
<table class="sample">
<tr>
<td id="cell1">cell 1</td>
<td id="cell2">cell 2</td>
<td id="cell3">cell 3</td>
</tr>
</table>


</div>
</body>
</html>


<script type="text/javascript">
Ext.onReady(function() {
var testPanel = new Ext.Panel( {
xtype:'panel',
html:'Test Page!',
renderTo:'cell2',
height: 100


});


});
</script>

12 Sep 2011, 8:37 AM
Thanks for the speedy reply, so if I wanted to insert a carousle in to that cell would I just update the code like this as I havn't has much luck with this:



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="autotheme.js"></script>
<script type="text/javascript" src="sencha-touch-debug.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
table.sample {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}
table.sample th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
table.sample td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
</style>
</head>
<body>


<div id="div1">
<table class="sample">
<tr>
<td id="cell1">cell 1</td>
<td id="cell2">cell 2</td>
<td id="cell3">cell 3</td>
</tr>
</table>


</div>
</body>
</html>


<script type="text/javascript">
Ext.setup({
tabletStartupScreen: 'assets/tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
direction: 'horizontal',
ui: 'light',
renderTo:'cell2',
activeItem: 0,
defaults: {
cls: 'card'
},
items: [{
title:'Tab 1',
html: 'Slide 1'
},
{
title: 'Tab 2',
html: 'Slide 2'
},
{
title: 'Tab 3',
html: 'Slide 3'
},
{
title: 'Tab 4',
html: 'Slide 4'
}],

});


new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1]
});

}
});
</script>

NickT
12 Sep 2011, 9:19 AM
You would do something like that, yes. The problem i see with the adjustments you made is that you inject the carousel into a panel that is set with fullscreen=true. This will basically blow over the targeted renderTo that we were doing. You would need to eliminate the fullscreen attribute from that panel.

Frankly, I would suggest you dont target a specific element with renderTo. I recommend letting Sencha touch inject your top level control directly as it wants. The reason for this is you will encounter challenges in my opinion when you port to device, with things like orientation change. If you truly have a page that you want to target a specific element with the injection of your ext top level control, then use the renderTo. If however, that is not the case, and you are comfortable building your entire page in ext, then let it just inject as it does by default. something like this.... I hope this is helpful to you....please feel free to comment back and I am happy to provide any further information


<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="lib/sencha/autotheme.js"></script>
<script type="text/javascript" src="lib/sencha/sencha-touch-debug.js"></script>
<link href="lib/sencha/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
table.sample {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}
table.sample th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
table.sample td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
</style>
</head>
<body>


</body>
</html>


<script type="text/javascript">
Ext.onReady(function() {
var testPanel = new Ext.Panel( {
fullscreen:true,
xtype:'panel',
html:'Test Page!'


});


});
</script>

14 Sep 2011, 1:00 AM
Thank you so much for your help with this I have managed to get my carousle loading to a seperate element and the orientation is working fine when I port to the iPad.

It's all starting to make so sense to me now.

Once again many thanks!http://www.sencha.com/forum/images/icons/icon14.pnghttp://www.sencha.com/forum/images/icons/icon7.png