PDA

View Full Version : Sencha Touch TabPanel and Carousel not showing all text



cmanunes
1 Jul 2011, 9:08 AM
Hi,

I have a TabPanel docked with a Carousel.
The problem is that if I have a text which height is greater then screen height it doesn't show all of it although the text is there.

Below is my code.

onReady: function() {
var innerPanel = new Ext.TabPanel({
tabBar:{
dock:'top',
layout:{
pack:'left'
}
},
items:[
{
iconCls:'home',
title:'home',
cls:'card'
},{
iconCls:'info',
title:'info',
cls:'card'
},{
iconCls:'user',
title:'user',
cls:'card'
}],
listeners:{
cardswitch:function(e,el){
if (el.title == "home") {
pres = 0;
if (pres < prev) moveLeft(wrapPanel, prev, pres);
else if (pres > prev) moveRight(wrapPanel, prev, pres);
prev = 0;
GetAJAXInfo(wrapPanel, el.title);
}
if (el.title == "info") {
pres = 1;
if (pres < prev) moveLeft(wrapPanel, prev, pres);
else if (pres > prev) moveRight(wrapPanel, prev, pres);
prev = 1;
GetAJAXInfo(wrapPanel, el.title);
}
if (el.title == "user") {
pres = 2;
if (pres < prev) moveLeft(wrapPanel, prev, pres);
else if (pres > prev) moveRight(wrapPanel, prev, pres);
prev = 2;
GetAJAXInfo(wrapPanel, el.title);
}
}
}
});

var wrapPanel = new Ext.Carousel({
fullscreen:true,
items:[
{
title:'home',
html:''
},{
title:'info',
html:'',
},{
title:'user',
html:''
}
],
defaults: {
cls: 'card'
},
scroll:'vertical',
dockedItems:innerPanel
,listeners:{
cardswitch:function(e,el){
pres = 0;
if (el.title == "home") {
pres = 0;
innerPanel.setActiveItem(0);
prev = 0;
}
if (el.title == "info") {
pres = 1;
innerPanel.setActiveItem(1);
prev = 1;
}
if (el.title == "user") {
pres = 2;
innerPanel.setActiveItem(2);
prev = 2;
}
}
}
});
wrapPanel.setActiveItem(0);
Ext.EventManager.onDocumentReady( function() { GetAJAXInfo(wrapPanel, "home"); } );
}
});

I have a huge list of countries and that list is cut.

Also the functions below help me made the slide to where ever I want. Enjoy
function moveLeft(obj, _init, _end) {
for (x = _init; x > _end; x--) {
obj.prev();
}
}

function moveRight(obj, _init, _end) {
for (x = _init; x < _end; x++) {
obj.next();
}
}

Can someone please give a hand here?

Thanks,

cmanunes
5 Jul 2011, 8:22 AM
Anyone??

Jack9
5 Jul 2011, 12:41 PM
I don't fully understand your question. I mocked up what you posted in a readable and testable format.
Can you run this and explain again, what doesn't look right?



Ext.setup({
tabletStartupScreen: 'tablet_startup.png'
,phoneStartupScreen: 'phone_startup.png'
,icon: 'phone_startup.png'
,glossOnIcon: true
,onReady: function() {
GetAJAXInfo(wrapPanel, "home");
var innerPanel = new Ext.TabPanel({
tabBar:{
dock:'top',
layout:{
pack:'left'
}
},
activeItem:0,
items:[
{
iconCls:'home',
title:'home',
cls:'card'
},{
iconCls:'info',
title:'info',
cls:'card'
},{
iconCls:'user',
title:'user',
cls:'card'
}
],
listeners:{
cardswitch:function(_this,newCard,oldCard,index){
wrapPanel.setActiveItem(index);
GetAJAXInfo(wrapPanel, newCard.title);
}
}
});

var wrapPanel = new Ext.Carousel({
fullscreen:true,
activeItem:0,
items:[
{
title:'home',
html:''
},{
title:'info',
html:''
},{
title:'user',
html:''
}
],
defaults: {
cls: 'card'
},
scroll:'vertical',
dockedItems:innerPanel,
listeners:{
cardswitch:function(_this,newCard,oldCard,index){
innerPanel.setActiveItem(index);
GetAJAXInfo(wrapPanel, newCard.title);
}
}
});
}
});

function GetAJAXInfo(){}

cmanunes
6 Jul 2011, 3:04 AM
Hi Jack9,

If the html is something like this

html : 'Afghanistan<br>Albania<br>Algeria<br>American Samoa<br>Andorra<br>Angola<br>Anguilla<br>Antigua &amp; Barbuda<br>Argentina<br>Armenia<br>Aruba<br>Australia<br>Austria<br>Azerbaijan<br>Bahamas<br>Bahrain<br>Bangladesh<br>Barbados<br>Belarus<br>Belgium<br>Belize<br>Benin<br>Bermuda<br>Bhutan<br>Bolivia<br>Bosnia-Herzegovina<br>Botswana<br>Brazil<br>Brunei Darussalam<br>Bulgaria<br>Burkina Faso<br>Burundi<br>Cambodia<br>Cameroon<br>Canada<br>Cape Verde Islands<br>Cayman Islands<br>Central African Republic<br>Chad<br>Chile<br>China<br>Colombia<br>Comoros<br>Congo<br>Cook Islands<br>Costa Rica<br>Croatia<br>Cuba<br>Cyprus<br>Czech Republic<br>Democratic Republic of Congo<br>Denmark<br>Djibouti<br>Dominica<br>Dominican Republic<br>Ecuador<br>Egypt<br>El Salvador<br>Equatorial Guinea<br>Eritrea<br>Estonia<br>Ethiopia<br>Falkland Islands<br>Faroe Islands<br>Fiji<br>Finland<br>France<br>French Guiana<br>French Polynesia<br>Gabon<br>Gambia<br>Georgia<br>Germany<br>Ghana<br>Gibraltar<br>Greece<br>Greenland<br>Grenada<br>Guadeloupe<br>Guam<br>Guatemala<br>Guinea<br>Guinea-Bissau<br>Guyana<br>Haiti<br>Honduras<br>Hong Kong<br>Hungary<br>Iceland<br>India<br>Indonesia<br>Iran<br>Iraq<br>Israel<br>Italy<br>Ivory Coast<br>Jamaica<br>Japan<br>Jordan<br>Kazakhstan<br>Kenya<br>Kiribati<br>Korea (South)<br>Kuwait<br>Kyrgyzstan<br>Laos<br>Latvia<br>Lebanon<br>Lesotho<br>Liberia<br>Libya<br>Liechtenstein<br>Lithuania<br>Luxembourg<br>Macedonia<br>Madagascar<br>Malawi<br>Malaysia<br>Maldives<br>Mali<br>Malta<br>Marshall Islands<br>Martinique<br>Mauritania<br>Mauritius<br>Mayotte<br>Mexico<br>Micronesia<br>Moldova<br>Monaco<br>Mongolia<br>Montenegro<br>Montserrat<br>Morocco<br>Mozambique<br>Myanmar (Burma)<br>Namibia<br>Nauru<br>Nepal<br>Netherlands<br>Netherlands Antilles<br>New Caledonia<br>NewZealand<br>Nicaragua<br>Niger<br>Nigeria<br>Niue<br>Norfolk Islands<br>Northern Marianas<br>Norway<br>Oman<br>Pakistan<br>Palau<br>Palestine<br>Panama<br>Papua New Guinea<br>Paraguay<br>Peru<br>Philippines <br>Pitcairn Islands<br>Poland<br>Portugal<br>Puerto Rico<br>Qatar<br>Republic of Ireland<br>Reunion<br>Romania<br>Russian Federation<br>Rwanda<br>Samoa<br>San Marino<br>Sao Tome &amp; Principe<br>Saudi Arabia<br>Senegal<br>Serbia<br>Seychelles<br>Sierra Leone<br>Singapore<br>Slovakia<br>Slovenia<br>Solomon Islands<br>Somalia<br>South Africa<br>Spain<br>Sri Lanka<br>St Helena<br>St Kitts-Nevis<br>St Lucia<br>St Pierre &amp; Miquelon<br>St Vincent &amp; the Grenadines<br>Sudan<br>Surinam<br>Swaziland<br>Sweden<br>Switzerland<br>Syrian Arab Republic<br>Taiwan<br>Tajikistan<br>Tanzania<br>Thailand<br>Timor-Leste<br>Togo<br>Tokelau<br>Tonga<br>Trinidad &amp; Tobago<br>Tunisia<br>Turkey<br>Turkmenistan<br>Turks and Caicos Islands<br>Tuvalu<br>Uganda<br>UK<br>Ukraine<br>United Arab Emirates<br>Uruguay<br>USA<br>Uzbekistan<br>Vanuatu<br>Vatican City<br>Venezuela<br>Vietnam<br>Virgin Islands (British)<br>Virgin Islands (USA)<br>Wallis &amp; Futuna<br>Yemen<br>Zambia<br>Zimbabwe<br>'
it will cut the text to show and not show all the text.

Is there anyway to workaround this?

Thanks

Jack9
6 Jul 2011, 8:27 AM
Since you have specified 'fullscreen' on the parent container, all you have to do is specify scroll:true on either the parent or child container. See my example code here.
Select second tab.
Swipe up.
Ta-da.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png'
,phoneStartupScreen: 'phone_startup.png'
,icon: 'phone_startup.png'
,glossOnIcon: true
,onReady: function() {
GetAJAXInfo(wrapPanel, "home");
var innerPanel = new Ext.TabPanel({
tabBar:{
dock:'top',
layout:{
pack:'left'
}
},
activeItem:0,
items:[
{
iconCls:'home',
title:'home',
cls:'card'
},{
iconCls:'info',
title:'info',
cls:'card'
},{
iconCls:'user',
title:'user',
cls:'card'
}
],
listeners:{
cardswitch:function(_this,newCard,oldCard,index){
wrapPanel.setActiveItem(index);
GetAJAXInfo(wrapPanel, newCard.title);
}
}
});

var wrapPanel = new Ext.Carousel({
fullscreen:true,
activeItem:0,
items:[
{
title:'home',
html:''
},{
scroll:true,
title:'info',
html : 'Afghanistan<br>Albania<br>Algeria<br>American Samoa<br>Andorra<br>Angola<br>Anguilla<br>Antigua &amp; Barbuda<br>Argentina<br>Armenia<br>Aruba<br>Australia<br>Austria<br>Azerbaijan<br>Bahamas<br>Bahrain<br>Bangladesh<br>Barbados<br>Belarus<br>Belgium<br>Belize<br>Benin<br>Bermuda<br>Bhutan<br>Bolivia<br>Bosnia-Herzegovina<br>Botswana<br>Brazil<br>Brunei Darussalam<br>Bulgaria<br>Burkina Faso<br>Burundi<br>Cambodia<br>Cameroon<br>Canada<br>Cape Verde Islands<br>Cayman Islands<br>Central African Republic<br>Chad<br>Chile<br>China<br>Colombia<br>Comoros<br>Congo<br>Cook Islands<br>Costa Rica<br>Croatia<br>Cuba<br>Cyprus<br>Czech Republic<br>Democratic Republic of Congo<br>Denmark<br>Djibouti<br>Dominica<br>Dominican Republic<br>Ecuador<br>Egypt<br>El Salvador<br>Equatorial Guinea<br>Eritrea<br>Estonia<br>Ethiopia<br>Falkland Islands<br>Faroe Islands<br>Fiji<br>Finland<br>France<br>French Guiana<br>French Polynesia<br>Gabon<br>Gambia<br>Georgia<br>Germany<br>Ghana<br>Gibraltar<br>Greece<br>Greenland<br>Grenada<br>Guadeloupe<br>Guam<br>Guatemala<br>Guinea<br>Guinea-Bissau<br>Guyana<br>Haiti<br>Honduras<br>Hong Kong<br>Hungary<br>Iceland<br>India<br>Indonesia<br>Iran<br>Iraq<br>Israel<br>Italy<br>Ivory Coast<br>Jamaica<br>Japan<br>Jordan<br>Kazakhstan<br>Kenya<br>Kiribati<br>Korea (South)<br>Kuwait<br>Kyrgyzstan<br>Laos<br>Latvia<br>Lebanon<br>Lesotho<br>Liberia<br>Libya<br>Liechtenstein<br>Lithuania<br>Luxembourg<br>Macedonia<br>Madagascar<br>Malawi<br>Malaysia<br>Maldives<br>Mali<br>Malta<br>Marshall Islands<br>Martinique<br>Mauritania<br>Mauritius<br>Mayotte<br>Mexico<br>Micronesia<br>Moldova<br>Monaco<br>Mongolia<br>Montenegro<br>Montserrat<br>Morocco<br>Mozambique<br>Myanmar (Burma)<br>Namibia<br>Nauru<br>Nepal<br>Netherlands<br>Netherlands Antilles<br>New Caledonia<br>NewZealand<br>Nicaragua<br>Niger<br>Nigeria<br>Niue<br>Norfolk Islands<br>Northern Marianas<br>Norway<br>Oman<br>Pakistan<br>Palau<br>Palestine<br>Panama<br>Papua New Guinea<br>Paraguay<br>Peru<br>Philippines <br>Pitcairn Islands<br>Poland<br>Portugal<br>Puerto Rico<br>Qatar<br>Republic of Ireland<br>Reunion<br>Romania<br>Russian Federation<br>Rwanda<br>Samoa<br>San Marino<br>Sao Tome &amp; Principe<br>Saudi Arabia<br>Senegal<br>Serbia<br>Seychelles<br>Sierra Leone<br>Singapore<br>Slovakia<br>Slovenia<br>Solomon Islands<br>Somalia<br>South Africa<br>Spain<br>Sri Lanka<br>St Helena<br>St Kitts-Nevis<br>St Lucia<br>St Pierre &amp; Miquelon<br>St Vincent &amp; the Grenadines<br>Sudan<br>Surinam<br>Swaziland<br>Sweden<br>Switzerland<br>Syrian Arab Republic<br>Taiwan<br>Tajikistan<br>Tanzania<br>Thailand<br>Timor-Leste<br>Togo<br>Tokelau<br>Tonga<br>Trinidad &amp; Tobago<br>Tunisia<br>Turkey<br>Turkmenistan<br>Turks and Caicos Islands<br>Tuvalu<br>Uganda<br>UK<br>Ukraine<br>United Arab Emirates<br>Uruguay<br>USA<br>Uzbekistan<br>Vanuatu<br>Vatican City<br>Venezuela<br>Vietnam<br>Virgin Islands (British)<br>Virgin Islands (USA)<br>Wallis &amp; Futuna<br>Yemen<br>Zambia<br>Zimbabwe<br>'
},{
title:'user',
html:''
}
],
defaults: {
cls: 'card'
},
scroll:'vertical',
dockedItems:innerPanel,
listeners:{
cardswitch:function(_this,newCard,oldCard,index){
innerPanel.setActiveItem(index);
GetAJAXInfo(wrapPanel, newCard.title);
}
}
});
}
});

function GetAJAXInfo(){}
</script>

cmanunes
6 Jul 2011, 9:21 AM
It works!!!

Thanks