PDA

View Full Version : Floating Panel Issue



mprovencher
23 Aug 2011, 10:13 AM
Hello again,

Still new at Sencha Touch and having issues with adding a navigation "toolbar" to my app (which is basically a horizontally-scrolling carousel of 17 sections, with several sections containing simple panels and others containing vertically scrolling carousels).

If I don't add "floating:true" to my navigation bar, it displays behind the carousel. If I add "floating:true", it displays correctly, but I can't get any "buttons" within it to display at all—doesn't even render (if I inspect it with a browser).

I don't know whether or not to include the buttons via the items[] array of my navBar Panel (I've tried switch it to Toolbar, Container, etc. Nothing works), and I get this error:

"Uncaught TypeError: Property '1' of object function (j,f){e.call(h,j,g,c,b,a,h,arguments.callee,f)} is not a function"

Here's my code for the navigation bar and the "toolbar home" button I'm trying to add to it (basically a clear div over the background image to add a listener to):



var tb_home = new Ext.Panel({
id:'tb_home',
cls:'tb_btn',
width:40,
height:32,
layout: {type: 'vbox', align: 'start', pack: 'end'},
floating:true,
hidden: true,
showAnimation:{ type: 'slide', direction:'down'},
style:'position:relative; cursor:pointer; z-index:21000; width:40px; height:32px;',
listeners: { tap: {element: 'el', fn: function(){
if (navBar.isVisible()){
navBar.hide();
tb_home.hide();
} else {
navBar.show();
tb_home.show();
}
mainPages.setActiveItem(s01);
}}}
});


var navBar = new Ext.Panel({
id:'navbar',
showAnimation:{ type: 'slide', direction:'down'},
layout: {type: 'vbox', align: 'start', pack: 'start'},
fullscreen: false,
hidden: true,
floating: true,
width: 1024,
height:32,
items: [/*tb_home*/],
style:'background:url(app/images/00_top_bar.png) no-repeat 0 0; position:relative; z-index:20000; width:1024px; height:32px;'
});


And here's an example of one of the panels I'm trying to use to fire the show/hide on the navigation bar:



var s01_pg01_bg = new Ext.Panel({
id:'s01_pg01_bg',
style: "background:#000 url(app/images/sec01_pg01_cover.jpg) no-repeat 0 0;",
width:1024,
height:748,
listeners: { tap: {element: 'el', fn: function(){
if (navBar.isVisible()){
navBar.hide();
tb_home.hide(); // this appears to be where the error is being generated from
} else {
navBar.show();
tb_home.show();
}
}}}
});


Are their any tutorials that walk through all these types of things? I feel like the "Hello World" tutorials and screencasts are overly simple and don't adequately set up a real-life application, but then things like the kitchen sink only show one example of a feature and don't elaborate on options or multiple examples—and the screencasts and tutorials seem to skip up to a way-over-my-head-you-need-to-be-a-good-developer-to-understand-this-stuff level.

frostfang
26 Sep 2011, 8:47 PM
I was wondering if there was a solution to this ?

frostfang
26 Sep 2011, 9:43 PM
I have discussed a possible solution here.

http://www.sencha.com/forum/showthread.php?134414-Touch-Auto-Complete-Help&p=653292#post653292