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

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

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

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: [

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,

//kanrival: null,

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

items: [{
xtype: 'list01'

animationDuration: 500,

show: function(animation) {

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)

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

initialize: function() {
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.