How to hide left slider automatically in portrait view?

In my application I have two sliders (left 30% / right 70%); I want to hide my left slider in portrait view, when the user rotates his tablet.

Is it possible? if yes then how?

enyo.kind({
    name: "dashboard",
    kind: enyo.VFlexBox,
    style: "background-color:#FFFFFF;",
    components: [

        {name: "header", kind: "Header", style: "background-color:#BDDEFF; height:57px;", layoutKind: "HFlexLayout", align: "start", components: [
            {kind: "ToolButtonGroup",style: "margin-right: 20px", components: [
                {icon: "images/menu-icon-refresh.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark"},
                ]},

            {kind: "ToolButtonGroup", components: [

                {icon: "images/menu-icon-settings.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark"},
                {icon: "images/menu-icon-edit.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark"},
   开发者_JAVA百科             {icon: "images/menu-icon-add.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark", onclick: "addtask"},
            ]},

            {name: "vbutton", kind: "Button",style: "width:15%; margin-left: 20px; margin-top: 1px;", caption: "Hide Menu",onclick: "hidemenu"},

            {kind: "VFlexBox",style: "color:#5D5D5D; font-weight:bold;",  flex: 1, align: "center", components: [
                {content: "Business"},
                ]},
            //{content: "Business",className: "enyo-item-secondary" ,style: "color:#5D5D5D; font-weight:bold;"},

            {kind: "ToolButtonGroup", components: [
                {icon: "images/menu-icon-edit.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark",onclick: "edittask"},
                {icon: "images/menu-icon-add.png", className: "enyo-radiobutton-dark enyo-grouped-toolbutton-dark",onclick: "addtasklist"},
                ]},

            {name: "title"},
            {name: "description", className: "enyo-item-secondary"}
        ]},
        {name: "slidingPane", kind: "SlidingPane", flex: 1, components: [

                    {name: "left", dismissible: true, onHide: "rightHide", onShow: "rightShow", onResize: "slidingResize", width: "250px", kind:"SlidingView", components: [

Menu/List
]},



            {name: "right",flex: 1, dismissible: false, onResize: "slidingResize",kind:"SlidingView", components: [

Menu related content

]},

],
});

First add this to your components:

{kind: "ApplicationEvents", onWindowRotated: "windowRotated"}

When the window is rotated , the following function will be called:

windowRotated: function(inSender) {
  if(enyo.getWindowOrientation() == "up"){
     this.$.left.setShowing(false);
  }
  else if(enyo.getWindowOrientation() == "left" OR enyo.getWindowOrientation() == "right"){
     this.$.left.setShowing(true);
  }

}