PDA

View Full Version : How to show a view on the top level



linuxyf
30 Nov 2011, 1:08 AM
How to show a view on the top level??

mitchellsimoens
30 Nov 2011, 8:23 AM
What do you mean?

linuxyf
1 Dec 2011, 12:54 AM
i refer to kiva example (detail.js), show several sub views from main view by animation effect.

sub view1


Ext.define('ShopSystem.view.view1', {
extend: 'Ext.Container',
xtype: 'zansetting',
id: 'zansetting',

requires: [
'ShopSystem.view.list01'
],


config: {
modal: true,
centered : true,
hideOnMaskTap : false,
padding: 0,
cls: 'ZanCls',
ui: 'zansetting',


// we always want the sheet to be 400px wide and to be as tall as the device allows
width: 400,
height: 600,
top: 100,
left:100,

//kanrival: null,


layout: {
type: 'vbox',
align: 'stretch'
},


items: [{
xtype: 'list01'
}]
},


animationDuration: 500,


show: function(animation) {
this.callParent();


Ext.Animator.run([{
element : this.element,
xclass : 'Ext.fx.animation.SlideIn',
direction: Ext.os.deviceType == "Phone" ? "up" : "left",
duration : this.animationDuration
},
{
element : 'ext-mask-1',
xclass : 'Ext.fx.animation.FadeIn',
duration: this.animationDuration
}
]);
},


hide: function(animation) {
var me = this,
mask = Ext.getCmp('ext-mask-1');


//we fire this event so the controller can deselect all items immediately.
this.fireEvent('hideanimationstart1', this);


//show the mask element so we can animation it out (it is already shown at this point)
mask.show();


Ext.Animator.run([{
element : me.element,
xclass : 'Ext.fx.animation.SlideOut',
duration : this.animationDuration,
preserveEndState: false,
direction: Ext.os.deviceType == "Phone" ? "down" : "right",
onEnd: function() {
me.setHidden(true);
mask.setHidden(true);
}
}, {
element : 'ext-mask-1',
xclass : 'Ext.fx.animation.FadeOut',
duration: this.animationDuration
}]);
},


initialize: function() {
this.on({
scope: this,
hiddenchange: this.onHiddenChange
});
},


onHiddenChange: function(me, hidden) {
if (!hidden) {


}
},
});




sub view2


Ext.define('ShopSystem.view.view2', {
......same as sub view1
items: [{
xtype: 'list02'
}]
},
......same as sub view1


the sub view1 and sub view2 can be called from main view. the sub view2 also can be called from sub view 1

after the main view is started, if i show sub view1 firstly, then i can show sub view2 from sub view1 or main view normally.

but if i show sub view2 from main view firstly, and hide the sub view 2. then i show sub view1 from main view and show sub view2 from sub view1, i found the sub view2 is showed under the sub view1. i want the view showed recently always be on the top level, but right now sub view2 is covered by sub view1.