在煎茶触摸动画（幻灯片）过渡 [英] Animated (slide) transition in sencha touch
本文介绍了在煎茶触摸动画（幻灯片）过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个煎茶应用SWICH面板包含了一个登录表单。该想到的是，我要当表单submited加载新的内容。我想新内容的幻灯片动画后加载。我试图用mainPanel.setCard（{类型：'滑'}），但我不知道如何把新的内容。任何想法？
Ext.setup（{
图标：的icon.png，
tabletStartupScreen：tablet_startup.png'，
phoneStartupScreen：phone_startup.png'，
glossOnIcon：假的，
onReady：功能（）{
VAR的mainPanel = Ext.Panel的新（{
ID：'主面板'，
renderTo：'内容'，
HTML：'＆LT; H1＆gt;请确定：其中; / H1＆GT;＆LT; P＆GT; Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。 Suspendisse预期值，也德维尔NEC mauris eleifend燕雀。法无sagittis placerat ullamcorper。 DUIS交流ELIT SAPIEN。 Pellentesque森帕前庭狮子座ID vehicula＆LT; / P＆GT;'
}）; 变种形式; Ext.regModel（用户，{
领域：
{
名称：'名'，
类型：'字符串'
}， {
名称：'密码'，
类型：'密码'
}，
]
}）; VAR formBase = {
renderTo：'主面板'，
ID：登录形式，
网址：资源/ login.php中'，
standardSubmit：假的，
项目：[{
的xtype：字段集，
默认值：{
要求：真实，
labelAlign：'左'，
labelWidth：'40％'
}，
项目：
{
的xtype：文本框，
名称：用户名，
标签：'Usuario'，
useClearIcon：真实，
autoCapitalize：假的
}，{
的xtype：'passwordfield'，
名称：'密码'，
标签：'Contraseña'，
useClearIcon：假的
}
]
}
]
听众：{
提交：功能（表格，结果）{
的console.log（'成功'，Ext.toArray（参数））;
}，
例外：功能（表格，结果）{
的console.log（失败，Ext.toArray（参数））;
}
}，
dockedItems：[{
的xtype：工具栏，
码头：'底'，
项目：
{
文本：Entrar'，
ID：'登录提交，
用户界面：'确认'，
处理：函数（）{
form.submit（{
方法：POST，
waitTitle：'连接'，
waitMsg：正在发送数据......，
成功：函数（响应）{
Ext.Msg.alert（状态，登录成功！，功能（BTN，文字）{
如果（BTN =='OK'）{
mainPanel.setCard（{
类型：'滑'
}）;
}
}）;
}，
故障：功能（形式，动作）{
Ext.Msg.alert（'状态'，'登录失败！'，函数（BTN，文字）{
如果（BTN =='OK'）{
form.reset（）;
}
}）;
如果（action.failureType =='服务器'）{
OBJ = Ext.util.JSON.de code（action.response.responseText）;
Ext.Msg.alert（'登录失败！，obj.errors.reason）;
}其他{
Ext.Msg.alert（'！警告，身份验证服务器无法访问：'+ action.response.responseText）;
}
form.reset（）;
}
}）;
}
}
]
}]
}; Ext.apply（formBase，{
身高：150
宽度：300
}）; 表=新Ext.form.FormPanel（formBase）; form.show（）;
}
}）;
解决方案
正确的code应该是：
Ext.get（'主面板'）setActiveItem（1，{类型：'滑'，方向：'左'}）;
I have a panel in a sencha app swich contains a login form. The think is that I wanna load new content when the form is submited. I wanna that the new content is loaded after an slide animation. I tried to use mainPanel.setCard({type:'slide'}) but it I don't know how to put the new content. Any idea?
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var mainPanel = new Ext.Panel({
id:'main-panel',
renderTo: 'content',
html: '<h1>Please Identify:</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel neque nec mauris eleifend fringilla. Nulla sagittis placerat ullamcorper. Duis ac elit sapien. Pellentesque semper vestibulum leo id vehicula.</p>'
});
var form;
Ext.regModel('User', {
fields: [
{
name: 'name',
type: 'string'
},
{
name: 'password',
type: 'password'
},
]
});
var formBase = {
renderTo:'main-panel',
id: 'login-form',
url : 'resources/login.php',
standardSubmit : false,
items: [{
xtype: 'fieldset',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'Usuario',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Contraseña',
useClearIcon: false
}
]
}
],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
},
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Entrar',
id: 'login-submit',
ui: 'confirm',
handler: function() {
form.submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',
success:function(response){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
mainPanel.setCard({
type: 'slide'
});
}
});
},
failure:function(form, action){
Ext.Msg.alert('Status', 'Login Failed!', function(btn, text){
if (btn == 'ok'){
form.reset();
}
});
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Login Failed!', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
form.reset();
}
});
}
}
]
}]
};
Ext.apply(formBase, {
height: 150,
width: 300
});
form = new Ext.form.FormPanel(formBase);
form.show();
}
});
解决方案
the correct code should be :
Ext.get('main-panel').setActiveItem(1, {type : 'slide', direction:'left'});
这篇关于在煎茶触摸动画（幻灯片）过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
