PDA

View Full Version : orientationchange question



gwthompson
30 Jun 2010, 6:49 PM
Hi,

In my setup routine I've created a full screen panel using the card layout with 1 item at the moment. I set the monitorOrientation to true but when I add in the onOrientationChange handler nothing is rendered on startup. If I remove the handler everything renders correctly on startup. If I change the iPad's orientation things are rendered. I simplified the handler to just include this.doComponentLayout() and still nothing.

Being a newbie I am obviously missing something so any and all help would be greatly appreciated.

Thanks,
Gary

TommyMaintz
30 Jun 2010, 7:06 PM
Have you tried console.log('something') inside your onOrientationChange? Is it being fired properly? Also you might have to call superclass.onOrientationChange.apply(this, arguments), but looking at what Component implements in it, not doing that shouldnt break anything.

Could you post some code? That might give us better clues as to what might be wrong.

gwthompson
30 Jun 2010, 7:20 PM
I have tried console.log('something') and it is being fired on startup as well as when I change the orientation. SInce I firsted posted my question I have added a toolbar and the funny thing is that always gets rendered.

Here is the code:




Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {

var tapHandler = function(button, event) {
var txt = "User tapped the '" + button.text + "' button.";
console.info(txt);
};



var buttonsGroup = [{
xtype: 'splitbutton',
activeButton: 0,
items: [{
text: '1',
handler: tapHandler
}, {
text: '2',
handler: tapHandler
}, {
text: '3',
handler: tapHandler
}]
}];

var dockedItems = [new Ext.Toolbar({
// dock this toolbar at the bottom
ui: 'light',
dock: 'bottom',
items: buttonsGroup
})];

var mainPanel = new Ext.Panel({

fullscreen: true,
layout: 'card',
cls: 'htmlcontent',
monitorOrientation: true,
dockedItems: dockedItems,
items: {
html: '<div id="mainContent"><div id="mainImage"><img id="tester" src="images/notes1.jpg" title="note1" alt="note1" /></div><div id="lessonheader">Note Authoring Overview</div><div id="sectionheader">Getting Started with Notes</div><div id="subheader">Clinical Notes</div><div id="pageContent"><br /><p>Clinical Notes provide an electronic record of a patient\'s encounter. A note can include documentation of problem management, orders, results, diagnoses, and discussions. </p><br /><p>In a structured note, the patient data is documented in the Note Authoring workspace using customized note forms, text templates, and/or dictation. </p><br /><p>Patient data can also be automatically or manually cited into note from areas within the EHR, such as Vitals, Medications, Allergies, and Problem lists.</p><br /><p>In addition, lab results, anatomical images, and markups can also be included in a note. </p></div></div><div style="display: none;"><div id="tester2"><img src="images/notes1.jpg" title="note1" alt="note1" width = 700 height=546/></div></div>'
},
onOrientationChange : function(orientation, w, h) {
this.doComponentLayout();

}



});

var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
//width: Ext.platform.isPhone ? 260 : 850,
//height: Ext.platform.isPhone ? 220 : 660,
styleHtmlContent: true,
contentEl: 'tester2',
cls: 'htmlcontent'
});

var showCenteredOverlay = function(event) {
overlay.setCentered(true);

overlay.show();
};





var myDiv = Ext.get("tester"); // get reference to an Ext.Element
myDiv.on( // 'on' is shorthand for addListener
"tap", // perform an action on click of myDiv
showCenteredOverlay // reference to the action handler
);
overlay.setWidth(850);
overlay.setHeight(660);

myDiv.setLeft('500');
myDiv.setTop('80');
myDiv.setWidth('410');

}
});



Thanks,
Gary

gwthompson
5 Jul 2010, 3:41 PM
Hi Tommy,

Sorry to be a pest but I'm lost with trying to figure out why my orientationChange is doing what I described previously and I was wondering if you had come across anything yet?

Thanks,
gt

TommyMaintz
6 Jul 2010, 1:07 PM
Im sorry for not getting back to this thread sooner. 4th of July and weekend and all... ;)

May I ask what you are trying to implement on orientation change? The component is automatically layed out on orientation change, so you won't have to take care of that yourself. Anyway, if I run the following code, it seems to work for me.



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
var tapHandler = function(button, event) {
var txt = "User tapped the '" + button.text + "' button.";
console.info(txt);
};

var buttonsGroup = [{
xtype: 'splitbutton',
activeButton: 0,
items: [{
text: '1',
handler: tapHandler
},
{
text: '2',
handler: tapHandler
},
{
text: '3',
handler: tapHandler
}]
}];

var dockedItems = [{
// dock this toolbar at the bottom
xtype: 'toolbar',
ui: 'light',
dock: 'bottom',
items: buttonsGroup
}];

var mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'card',
cls: 'htmlcontent',
dockedItems: dockedItems,
items: {
html: 'some html'
}
});
}
});