Sencha Touch - Windows Phone 8 Phonegap Application Bar not hiding on back button click - windows-phone-7

Question

We are developing an hybrid mobile application using Sencha touch 2 for Windows Phone 8.
While developing we noticed that for a number field in windows phone 8 there is no keyboard done button available.Please refer to the below screenshot.
We then decided to write a custom application bar in Windows Phone 8 - Phonegap application inside the MainPage.cs with an Done button inside that application bar.Please refer to the below screenshot.
Now the done functionality works fine but when we click on the back button of the device the keyboard hides but the application bar remains in the view as in the below screenshot
We tried overriding the back button functionality in phonegap, but when the keyboard is shown the back button click is fired only the second click ,the first click hides the keyboard and the second click fires the overridden function.
Can someone provide some alternatives or a solution on how to hide the custom application bar along with the keyboard when the back button is clicked the first time ?

Answer 1

In MainPage.xaml.cs add listener mentioned below which listens the event when back button is pressed in device when keypad is opened.
And pass a string from java script when ur calling particular plugin to show the application bar contains done button, by using that you can identify in which case you have to show and other case you can hide the bar.
cordova.exec(null, null, "Cordova.Extension.Commands.DoneButtonPlugin", "keyboardDoneShow", "Num");
cordova.exec(null, null, "Cordova.Extension.Commands.DoneButtonPlugin", "keyboardDoneHide", "input string");
private void CordovaView_LayoutUpdated(object sender, EventArgs e)
{
if (CordovaView.Content.DesiredSize.Height == 0)
{
if(App.appBar.IsVisible)
App.HideShell();
}
else
{
if (App.NumKey == "\"Num\"") {
if(!App.appBar.IsVisible)
App.ShowShell();
}
}
}