Hi folks, Currently I'm optimizing our app to be viewed in IPAD. left menu is always showing, the right content always overlaps the menu. BTW, please see my codes below:
menu view:
portrait main controller:
screenshot:
Screen Shot 2015-01-21 at 11.19.40 am.jpg
IPAD Left Menu and Right Content doesn't display correctly
tablet main view:
Code:
Ext.define('XX.view.tablet.portrait.Main',{ extend: 'Ext.Container',
xtype: 'tabletPortraitMain',
requires: [
'XX.view.tablet.Menu'
],
config: {
layout: 'hbox',
height:'100%',
items:[{
xtype: 'tabmenu',
docked: 'left',
style: 'border:1px solid red;'
},{
xtype: 'panel',
itemId: 'contentPanel',
html: 'asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf',
layout: 'fit',
height: '100%',
width: '100%',
flex: 1.9
}]
}
});
menu view:
Code:
Ext.define('XX.view.tablet.Menu',{ extend: 'Ext.Container',
xtype: 'tabmenu',
config: {
cls: 'mainmenu',
docked: 'left',
top: 0,
left: 0,
bottom: 0,
zIndex: 0,
width: 266,
padding: '0 0 0 0',
open: false,
scrollable: 'vertical',
defaultType: 'button',
defaults: {
textAlign: 'left'
},
scrollable: {
indicators: false
},
items: [{
text: 'Home',
ui: 'mainmenu',
iconCls: 'home',
itemId: 'home'
},{
text: 'Find Agents',
ui: 'mainmenu',
iconCls: 'file',
itemId: 'enquiry'
},{
hidden: true,
text: 'Submit Exclusive',
ui: 'mainmenu',
iconCls: 'drawer',
itemId: 'manage'
},{
hidden: true,
text: 'Transaction Tracker',
ui: 'mainmenu',
iconCls: 'lightning',
itemId: 'tracker'
},{
hidden: true,
text: 'Downline Reports',
ui: 'mainmenu',
iconCls: 'downline',
itemId: 'downline'
},{
text: 'Salesperson Login',
ui: 'mainmenu',
iconCls: 'user',
itemId: 'account'
},{
hidden: true,
text: 'Settings',
ui: 'mainmenu',
iconCls: 'settings',
itemId: 'settings'
},{
xtype: 'component',
cls: 'divider',
html: 'SEARCH'
},{
text: 'Property Search',
ui: 'mainmenu',
iconCls: 'search',
itemId: 'search'
},{
hidden: true,
text: 'Map',
ui: 'mainmenu',
iconCls: 'globe',
itemId: 'mapsearch'
},{
xtype: 'component',
cls: 'divider',
html: 'TOOLS'
},{
text: 'Square Foot Research',
ui: 'mainmenu',
iconCls: 'analysis',
itemId: 'squarefoot'
},{
xtype: 'component',
cls: 'divider',
html: 'PROJECTS'
},{
text: 'Local Projects',
ui: 'mainmenu',
iconCls: 'home',
itemId: 'local'
},{
text: 'Overseas Projects',
ui: 'mainmenu',
iconCls: 'globe',
itemId: 'overseas'
},{
xtype: 'component',
cls: 'divider',
html: 'RESOURCES'
},{
hidden: true,
text: 'Forms',
ui: 'mainmenu',
iconCls: 'form',
itemId: 'forms'
},{
text: 'Research Reports',
ui: 'mainmenu',
iconCls: 'research',
itemId: 'research'
},{
text: 'Contact Us',
ui: 'mainmenu',
iconCls: 'form',
itemId: 'contactus'
},{
text : 'Notifications',
ui: 'mainmenu',
badgeText: '0',
iconCls: 'form',
itemId: 'notifications'
}]
},
setParent: function(parent) {
this.callParent(arguments);
this.maskCmp = parent.add({
xtype : 'component',
cls : 'mainmenu-mask',
top : 0,
zIndex : 5000,
hidden : true,
width : 9999,
left : this.getWidth(),
bottom : 0
});
this.maskCmp.element.on({
scope : this,
touchend: 'onMaskRelease'
});
},
onMaskRelease: function() {
this.setOpen(false);
},
closeMenu: function(){
this.setOpen(false);
},
onDestroy: function() {
this.maskCmp.destroy();
delete this.maskCmp;
this.callParent(arguments);
},
toggle: function() {
this.setOpen(!this.getOpen());
},
updateOpen: function(open) {
var scroller = this.getScrollable().getScroller();
var targetEl,
parentCt = this.up();
if (!parentCt) {
return;
}
targetEl = parentCt.innerElement;
if (open) {
targetEl.translate(this.getWidth(), 0, 0);
this.maskCmp.show();
scroller.scrollToTop();
}
else {
targetEl.translate(0, 0, 0);
this.maskCmp.hide();
}
}
});
portrait main controller:
Code:
Ext.define("XX.controller.tablet.PortraitMain", { extend: 'Ext.app.Controller',
requires: [
'XX.view.tablet.Home',
'XX.view.Account',
'XX.view.Local',
'XX.view.Overseas',
'XX.view.Search',
'XX.view.Manage',
'XX.view.Forms',
'XX.view.Research',
'XX.view.Training',
'XX.view.Tracker',
'XX.view.Enquiry',
'XX.view.MapSearch',
'XX.view.Downline',
'XX.view.Settings',
'XX.util.Account',
'XX.view.ContactUs',
'XX.view.tablet.Menu'
],
config: {
refs: {
main: 'tabletPortraitMain',
toolbar: 'tabletPortraitMain toolbar',
backButton: 'tabletPortraitMain toolbar #backButton',
menuButton: 'tabletPortraitMain toolbar #menuButton',
menu: 'tabmenu',
menuItem: 'tabmenu button',
contentPanel: 'tabletPortraitMain #contentPanel',
manageMenuItem: 'tabmenu #manage',
downlineMenuItem: 'tabmenu #downline',
trackerMenuItem: 'tabmenu #tracker',
settingsMenuItem: 'tabmenu #settings',
mapSearchMenuItem: 'tabmenu #mapsearch',
formsMenuItem: 'tabmenu #forms',
notificationsMenuItem: 'tabmenu #notifications'
},
routes: {
':viewxtype': 'goToPage'
},
control: {
backButton: {
tap: 'backButtonTap'
},
menuButton: {
tap: 'menuButtonTap'
},
menuItem: {
tap: 'menuItemTap'
},
notificationsMenuItem: {
tap: 'notificationsItemTap'
},
main: {
initialize: 'mainInitialize',
navigationMode: 'switchToNavigation'
}
}
},
navigationView: false,
init: function() {
this.callParent(arguments);
},
switchToNavigation: function(navigationView) {
// Set child's title
var childItem = navigationView.getItems().items.slice(-1)[0];
this.getToolbar().setTitle(childItem.getTitle());
// Navigation UI
this.getBackButton().setHidden(false);
this.getMenuButton().setHidden(true);
this.navigationView = navigationView;
},
backButtonTap: function() {
if (this.navigationView) {
// Set root's title
this.getToolbar().setTitle(this.navigationView.getTitle());
// Pop to root
this.navigationView.reset();
this.navigationView = false;
}
// Restore UI
this.getBackButton().setHidden(true);
this.getMenuButton().setHidden(false);
},
menuButtonTap: function() {
this.getMenu().toggle();
//Helper.alert('XX Tablet','menu tablet has been tapped!');
},
mainInitialize: function() {
//console.log('resetlayout');
if (location.hash === '') {
this.redirectTo('home');
}
if (Account.getToken()) {
console.log('table controller main initialize');
// Load Notification List Count
/*var store = Ext.create('XX.store.remote.Notifications');
var proxy = store.getProxy();
var deviceid = device.uuid;
proxy.setUrl(Proxy.getUrl()+'LoadPushNotifications?op=push&DeviceID='+deviceid.toString());
Helper.setMask(true);
store.load({
callback: function(records,success) {
Helper.setMask(false);
if (success) {
if(store.getCount() > 0)
{
this.getNotificationsMenuItem().setBadgeText(store.getCount());
}
else
{
this.getNotificationsMenuItem().setBadgeText('0');
}
// Check status flag and display error message if necessary
}
else {
Helper.alert('','Unable to load data, please try again later.');
}
},
scope: this
});*/
// Show authorised user menu items
console.log("before");
this.getApplication().getController('XX.controller.tablet.PortraitMain').resetLayout();
//this.getApplication().getController('XX.controller.tablet.Main').toggleMode(true);
console.log("after");
}
/*console.log('');
console.log(location.hash);
if (location.hash === '') {
console.log('location hash = nothing');
this.getApplication().getController('XX.controller.tablet.Main').resetLayout();
this.redirectTo('home');
}
this.getApplication().getController('XX.controller.tablet.Main').resetLayout();
console.log('after');*/
},
resetLayout: function() {
/*if (location.hash === '') {
this.redirectTo('home');
}*/
console.log('resetlayout');
if (Account.getToken()) {
console.log('table controller main initialize');
// Load Notification List Count
/*var store = Ext.create('XX.store.remote.Notifications');
var proxy = store.getProxy();
var deviceid = device.uuid;
proxy.setUrl(Proxy.getUrl()+'LoadPushNotifications?op=push&DeviceID='+deviceid.toString());
Helper.setMask(true);
store.load({
callback: function(records,success) {
Helper.setMask(false);
if (success) {
if(store.getCount() > 0)
{
this.getNotificationsMenuItem().setBadgeText(store.getCount());
}
else
{
this.getNotificationsMenuItem().setBadgeText('0');
}
// Check status flag and display error message if necessary
}
else {
Helper.alert('','Unable to load data, please try again later.');
}
},
scope: this
});*/
// Show authorised user menu items
console.log("before");
this.getApplication().getController('XX.controller.tablet.PortraitMain').toggleMode(true);
console.log("after");
}
},
toggleMode: function(loggedIn) {
if (loggedIn) {
this.getManageMenuItem().setHidden(false);
this.getTrackerMenuItem().setHidden(false);
this.getDownlineMenuItem().setHidden(false);
this.getSettingsMenuItem().setHidden(false);
this.getMapSearchMenuItem().setHidden(false);
this.getFormsMenuItem().setHidden(false);
this.getNotificationsMenuItem().setHidden(false);
}
else {
this.getManageMenuItem().setHidden(true);
this.getTrackerMenuItem().setHidden(true);
this.getDownlineMenuItem().setHidden(true);
this.getSettingsMenuItem().setHidden(true);
this.getMapSearchMenuItem().setHidden(true);
this.getFormsMenuItem().setHidden(true);
this.getNotificationsMenuItem().setHidden(true);
}
},
menuItemTap: function(button) {
switch (button.getItemId()) {
case 'squarefoot':
var params = '';
/*var userProfile = UserProfile.get();
if (userProfile) {
params = '&username='+userProfile.get('username')+'&password='+userProfile.get('password');
}*/
var url = 'http://ift.tt/1xw16lm'+params;
if (window.cordova) {
window.open(url,'_blank','toolbar=no,location=no,enableViewportScale=yes');
}
else {
window.open(url,'_blank');
}
break;
case 'mapsearch':
if (!googleMapIsReady) { // notification.js
Helper.alert('Map','Map services are still loading. If problem persists, please kill and restart App.');
loadGoogleMap();
}
else {
this.redirectTo(button.getItemId());
}
break;
default:
this.redirectTo(button.getItemId());
//this.redirectTo(button.getItemId() + "/" + button.getText());
break;
}
console.log(button.getItemId());
console.log('1');
//this.getMenu().toggle();
console.log('2');
},
notificationsItemTap: function(button){
button.setBadgeText('0');
var params = {};
var deviceid = device.uuid;
params['DeviceID'] = deviceid;
var _this = this;
_this.getApplication().getController('XX.controller.Notifications').updateReadOn(params);
},
goToPage: function(viewXtype) {
switch (viewXtype) {
default:
this.displayPage(viewXtype);
console.log(viewXtype);
break;
}
},
refreshPage: function(viewXtype) {
this.displayPage(viewXtype,true);
},
displayPage: function(viewXtype,refresh) {
var contentPanel = this.getContentPanel();
console.log(contentPanel + viewXtype);
if(!refresh)
{
console.log('not = refresh');
console.log('displaypage');
var layout = Ext.create('XX.view.Layout');
console.log(Ext.Viewport.getOrientation());
this.initLayout2(['tablet'], 'tablet', 'portrait');
Ext.Viewport.add(layout);
}
else
{
var widget = false;
//try {
widget = Ext.widget(viewXtype);
//}
//catch(e) {
//console.log(e.message);
//}
if (widget) {
contentPanel.removeAll();
contentPanel.add(widget);
//this.getToolbar().setTitle(widget.getTitle());
}
}
//jvar widget = false;
//try {
//jwidget = Ext.widget(viewXtype);
//}
//catch(e) {
//console.log(e.message);
//}
//jif (widget) {
//jcontentPanel.removeAll();
//jcontentPanel.add(widget);
//this.getToolbar().setTitle(widget.getTitle());
//j}
/*console.log('displaypage');
var layout = Ext.create('XX.view.Layout');
console.log(Ext.Viewport.getOrientation());
layout.initLayout(['tablet'], 'tablet', Ext.Viewport.getOrientation());
Ext.Viewport.add(layout);*/
},
initLayout2: function (dualLayout, device, orientation) {
if (Ext.Array.contains(dualLayout, device)) {
var layout = Ext.create('XX.view.Layout');
layout.add([
{
//xtype: device + 'PortraitMain',
xtype: 'tabletPortraitMain',
itemId: 'portrait',
hidden: orientation !== 'portrait'
},
{
xtype: device + 'LandscapeMain',
itemId: 'landscape',
hidden: orientation !== 'landscape'
}
]);
} else {
layout.add({
//xtype: device + 'Main'
xtype: 'main'
});
}
layout.device = device;
layout.orientation = orientation;
layout.dualLayout = dualLayout;
}
});
screenshot:
Screen Shot 2015-01-21 at 11.19.40 am.jpg
IPAD Left Menu and Right Content doesn't display correctly
Aucun commentaire:
Enregistrer un commentaire