I built mobile web application with sencha touch 2.0
I have a regular panel object :
{
html : "content",
scrollable : true
}
When I use the scrollable option I have problem on android.
The scroll bar appears but all the content is no visible... just blank.
But the way , on iPhone I see the content and everything works.
Why its happened ? What I need to do to fix that ?
Please Mention
'fullscreen: true'
While creating this panel
Thanks
Jaffer
Related
I am using the library react-navigation-drawer for my app side menu.
My app should be working on iphone and iPad as well.
The default side menu of this library is working well on iPhone.
But on iPad, side menu should be always visible on my app.
I could implement this by drawerLockMode:'locked-open' on some pages.
But Side menu has been overlayed on content screen. and could not doing any actions on content screen.
Even content screen has been pushed aside as width of side menu.
Anyone help me how to implement the responsive side menu on iPhone and iPad?
Thanks
whenever app is running on iPad, set drawerType={'permanent'} for Drawer.Navigator
https://reactnavigation.org/docs/drawer-navigator/#drawertype
When i try to build my app to simulator running iPhone X there's an odd spaces on top and bottom of the screen as shown in the image. It's supposed to be full screen. Any idea how i can fix this? Thanks in advance.
i am running rn v0.47 and xcode 9.
Probably you are setting the launch screen as images, try by setting the LaunchScreen as a storyboard and be sure to have the Use Safe Area Layout Guides active on it.
If you don't have a LaunchScreen.storyboard you can just create a new one an set it, or create a new empty project and just grab the existing LaunchScreen.storyboard and copy/paste it to your current project.
Camo's answer is right. The issue is related on splash screen. But i just wanted to share how i fixed my issue since I am not using storyboard for my launchScreen.
So first i created a new launchscreen image with dimensions 1125x2436(portrait) and 2436x1125(landscape) and added it to my launchimage directory.
And then updated the Contents.json file adding this 2 configurations:
{
"orientation" : "portrait",
"idiom" : "iphone",
"extent" : "full-screen",
"minimum-system-version" : "11.0",
"filename" : "1125x2436.png",
"subtype" : "2436h",
"scale" : "3x"
},
{
"orientation" : "landscape",
"idiom" : "iphone",
"extent" : "full-screen",
"minimum-system-version" : "11.0",
"filename" : "2436x1125.png",
"subtype" : "2436h",
"scale" : "3x"
}
Update your LaunchImage assets.
I had an old LaunchImage asset that did not include the iPhone X(s) sizes. I tried "refreshing" or "updating" the existing LaunchImage asset, but couldn't do that. Instead, I just deleted the existing one and created a new one.
That fixed the bars on the top and bottom of the actual app after the launch screen is done.
My guess is because Apple assumes that if you don't have the proper LaunchImage for the taller iPhone X(s) screens, then your app isn't optimized for the new screen so instead of breaking your app layout, it just uses the limited screen size for compatibility.
If you need a good template for making the updated Launch Images, here's a free Sketch template that I used and it worked great:
https://www.sketchappsources.com/free-source/1122-ios-splash-launcher-template-sketch-freebie-resource.html
I am writing simple apps with Sencha Touch 2. I see that the basic object in app/view/Main.js is Ext.tab.Panel.
What other Ext objects can be embedded directly into Ext.tab.Panel? Where can I look up this information?
From the Sencha Touch 2.3.1 docs, Ext.tab.Panel section:
http://docs-origin.sencha.com/touch/2.3.1/#!/api/Ext.tab.Panel
Tab Panels are a great way to allow the user to switch between several
pages that are all full screen. Each Component in the Tab Panel gets
its own Tab, which shows the Component when tapped on. Tabs can be
positioned at the top or the bottom of the Tab Panel, and can
optionally accept title and icon configurations.
Basically, you can put any view class which is subclass of Ext.Container inside a tab panel.
You can put any view you want.You can even put another container inside a container
Have a look at sencha touch docs.
http://docs.sencha.com/touch/2.3.1/#!/guide/views
I have two issues with a Sencha Touch application, first is how do I remove the top bar highlighted in red, second is, when I press the back from above bar it goes back fine but when I press the phone's back button it takes me out of application, what can I do? Look at the picture below
I have already tried using navigationBar:hidden or false and autoMaximize:true, also about back button thing I don't have any idea so please suggest me something.
Question 1)
I guess you are using Sencha native packaging, and you have encountered this bug: http://www.sencha.com/forum/showthread.php?259817-3.1.0.256-Strange-Android-Titlebar-on-native-Apps/page2
Quote from richardvd user of Sencha Touch Forums:
This is the Android TitleBar, you can remove it by adding an attribute
to your base AndroidManifest.xml.
In my case this file is located here:
C:\ext\Sencha\Cmd\3.1.1.274\stbuild\st-res\android\AndroidManifest.xml
Open it and add this attribute to the application field:
android:theme="#android:style/Theme.NoTitleBar"
Question 2)
You can control the back button behaviour from Javascript with Cordova/Phonegap:
document.addEventListener("backbutton", yourCallbackFunction, false);
Source: PhoneGap documentation
I am using ExtJS 4.0.7
I have grid on my page. If there is too much data scrollbar automatically comes, in Chrome, Mozilla IE even on Safari as well.
But when I try to access the same application in I-pad , scroll bar are not working.
Note:- Grids reast fetures i.e. pagination etc are working fine. Only scrollbar are not working.
Is there any specific reason for this ?
This is a known problem with Ext 4.0; it uses virtual scroller for grids and it's completely broken on touch devices. Ext JS 4.1 solves this problem and scrolling works on iPads, although scrollbars are not displayed.