linuxyf
25 Nov 2011, 4:32 AM
i refer to the Kiva example, display a view by sliding in from right.
now, when i click the outside the view, the hide() method is called, the view is closed.
i want to click the custom quit button to close the view rather than closing the view by click the outside the view.
that is, click the mask (outside the view), don't call the hide method to close the view . how to do??
the code is as following:
Ext.define('ShopSystem.view.ZanSetting', { extend: 'Ext.Container',
xtype: 'zansetting',
id: 'zansetting',
requires: [
'ShopSystem.view.GroupList'
],
config: {
modal: true,
centered : true,
hideOnMaskTap : true,
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: 'grouplist'
}]
},
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) {
}
}
});
now, when i click the outside the view, the hide() method is called, the view is closed.
i want to click the custom quit button to close the view rather than closing the view by click the outside the view.
that is, click the mask (outside the view), don't call the hide method to close the view . how to do??
the code is as following:
Ext.define('ShopSystem.view.ZanSetting', { extend: 'Ext.Container',
xtype: 'zansetting',
id: 'zansetting',
requires: [
'ShopSystem.view.GroupList'
],
config: {
modal: true,
centered : true,
hideOnMaskTap : true,
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: 'grouplist'
}]
},
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) {
}
}
});