I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).
Related
I have a Rally.ui.cardboard.CardBoard as an item in an Ext.tab.Panel. When there are enough cards to cause a vertical scrollbar to appear, eating 16px of width, instead of fitting the new width dynamically, a horizontal scrollbar appears too. This doesn't happen when the CardBoard is rendered to document.body.
I've been looking for the right set of config options to make the TabPanel and its child items[] resize automatically. After two days trying in vain, I'm about to give up and just force a width of 1902px for PCs and 2862px for Macs. If anyone has a better idea, I'm more than willing to try it... anything at this point.
We could find no way to do this through config options alone, so we ended up listening to the App's own resize event and updated the panel size. In the App config we have this, and it does the trick:
listeners: {
resize: function( app, width, height, oldWidth, oldHeight, eOpts ) {
if (app.TabPanel) {
app.TabPanel.setWidth(window.innerWidth);
app.TabPanel.setHeight(window.innerHeight);
}
}
}
If anyone has a better solution that only uses config options and the framework does the resizing, I'd still like to see it, as the above is an ugly hack even if it works.
I am trying to scroll a panel using button tap, and the panel is scrolling as I want. But my problem is that,
After scroll end it back again to its initial position, doesn't stick to its new position.
Why this behavior and how can I get leave from this?
Code I used (working just fine)
var container = this.getDealdetails();
container.getScrollable().getScroller().scrollTo(x , y, true);
The scrollable container will scroll back if the scroll to position is greater than the height of the container.
This is best demonstrated with an example. Run this fiddle: http://www.senchafiddle.com/#8Qnt8
Make your browser window smaller in height and note how it behaves. Hope this makes sense.
var panel= Ext.getCmp('iObserveCreateRecords');
panel.getScrollable().getScroller().scrollTo(0, 0, true);
//iObserveCreateRecords is panel id
I have come to see that Sencha Touch framework is improving noticeably. Since I couldn't see something like what I want, I wanted to ask here and see if it's possible. I would like to hear your opinion on how to do some image change animation when the image is touched. When you touch the image, another image will animate growing from the middle.
Actually I also want to detect (if possible) the location of the touch on the image (Things I could do on iOS).
Is this possible? If so, any advice is appreciated.
Thanks
Panel has some properties to find out location of the touch:
var Xscroll = somePanel.scroller.offset.x;
var Yscroll = somePanel.scroller.offset.y;
Also, for your animation, you can do something like this:
Have 1 image on your 1st panel (make that image fit to the panel and keep it to background) like this:
JS:
App.somePanel= new Ext.Panel({
cls: 'somePanel',
html: '<h1>Welcome to my app!</h1>',
//some other properties
});
CSS:
.somePanel {
background-image: url(http://somesite.com/someimage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
Have second panel like that.
On some event on the first panel do:
Hide that panel with animation
Show the second panel with animation
The list of animations is given in Sencha Touch API
I am working on a mobile application and using sencha touch charts. By default horizontal bar chart is fitting exactly into screen. If there are more number of bars,then bars are appearing very thin and looking odd. I want to fix bar width to have uniform look and feel irrespective of number of bars being displayed. No matter even user need to scroll down to see entire chart. I have tried below option in series configuration, but it did not work.
style : {
size : 30
}
Please help me.
Thanks,
Nag.
am able to change the bar width by setting barWidth option in touchcharts-debug.js by refering to the following link
http://docs.sencha.com/touch-charts/1-0/source/Bar.html
but the axis labels are not rendering properly labels are fitting into screen
I tried this code in my interactions to render the labels, it's working fine
{
type: 'panzoom',
showOverflowArrows: false,
//axes: ['bottom'],
axes: {
bottom: false,
left: {
startZoom: 2
}
}
}
thanks for the reply, looks like we might be getting somewhere. I have created a new view thats plain and in a simple form. See below:
var homePanelTop = new Ext.Panel({ id:'topCont',
cls:'topCont'
});
var homePanelBtm = new Ext.Panel({
id:'btmCont',
cls:'btmCont'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
id:'mainlayout',
fullscreen : true,
layout: {
type: 'vbox',
align: 'stretch',
},
defaults:{flex:1},
items: [homePanelTop, homePanelBtm],
suspendLayout: true,
monitorOrientation: true,
orientationchange: this.onOrientationChange,
onOrientationChange: function(orientation, w, h){
this.suspendLayout = false;
if(orientation === 'portrait'){
console.log('P: ' + orientation);
this.add(homePanelTop, true);
} else {
console.log('L: ' + orientation);
this.remove(homePanelTop, false);
}
this.doLayout();
}
});
Ext.reg('HomeIndex', App.views.HomeIndex);
What i expect to see with the above view is on first load and portrait, there will be two panels, the top panel(yellow) and a bottom panel (blue). When I rotate as normal I still get the same effect.
But what I am after is that when I rotate to landscape the top panel (yellow) is removed and the bottom panel (blue) fills the rest of the space.
Then when I rotate back to portrait I get both panels back at their design sizes (flex:1)
Whats happening using the code above (testing in chrome) is that the top panel (yellow) remains at the top but slightly smaller in height and does not disappear like it should
Anyway notice the two console trace commands I have and these are showing the following readings on rotation:
After first load, I then rotate to landscape and the output is:
L: landscape
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
The when I rotate back to portrait I get the following output:
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument of the component to remove. cmp.remove() is incorrect usage.
L: landscape
Attempted to remove a component that does not exist. Ext.Container: remove takes an argument
of the component to remove. cmp.remove() is incorrect usage.
P: portrait
P: portrait
So looking at this on the lanscape rotation it actually some how fires the onorientationchange function 4 times, the first one is ok the other three with an error as the first one already removed it so thats what the warnings are for I believe.
Then with the portrait ones I get two registering as lanscape calls then two hits registering portrait calls.
All this with one movement, so is this somehow causing the remove and add code's not to work as predicted and how to prevent the orientation being called four times on rotation??
If anyone has an idea on the development of this feel free to join in.
Thanks for the help so far
Si
Many years later... and more for someone like me that stumbles on to this looking for help.
Two things.
1) The message "Attempted to remove a component that does not exist" is found only in the "development" version of the ExtJS library and I don't know that it is a reliable indicator of a problem.
2) If you can upgrade to ExtJS 4.1x. It will give you access to better debugging tools. I am thinking specifically of the 'Ext JS Page Analyzer'. This will help you see what the layout engine is doing as apposed to what you hope it is doing.
See: http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications