Transitions in Sencha – Examples

var App = new Ext.Application({

name: ‘TestApp’,

useLoadMask: true,

launch: function () {

Ext.regModel(‘Contact’, {

fields: [‘animation’, ‘extra’]

});

var store = new Ext.data.JsonStore({

model : ‘Contact’,

data: [

{animation: ‘Slide’,        extra: ”},

{animation: ‘Slide’,         extra: ‘Cover’},

{animation: ‘Slide’,         extra: ‘Reveal’},

{animation: ‘Pop’,         extra: ”},

{animation: ‘Flip’,         extra: ”},

{animation: ‘Cube’,         extra: ”},

{animation: ‘Fade’,         extra: ”}

]

});

var list = new Ext.List({

fullscreen: true,

itemTpl : ‘{animation} {extra}’,

listeners:{

itemtap: function( dv, index, item, e){

if ( index == 0 ) //Slide

{

TestApp.views.viewport.setActiveItem(1, { type: ‘slide’, direction: ‘left’ });

}

else if ( index == 1 ) //Slide Cover

{

TestApp.views.viewport.setActiveItem(1, { type: ‘slide’, cover: true });

}

else if ( index == 2 ) //Slide Reveal

{

TestApp.views.viewport.setActiveItem(1, { type: ‘slide’, reveal: true });

}

else if ( index == 3 ) //Pop

{

TestApp.views.viewport.setActiveItem(1, { type: ‘pop’, duration: 1000 });

}

else if ( index == 4 ) //Flip

{

TestApp.views.viewport.setActiveItem(1, { type: ‘flip’, duration: 600 });

}

else if ( index == 5 ) //Cube

{

TestApp.views.viewport.setActiveItem(1, { type: ‘cube’, duration: 600 });

}

else if ( index == 6 ) //Fade

{

TestApp.views.viewport.setActiveItem(1, { type: ‘fade’, duration: 1600 });

}

}

},

indexBar: true,

store: store

});

list.show();

TestApp.views.topToolbar = new Ext.Toolbar({

title: ‘Animation Example’,

items: [

{

text: ‘Back’,

ui: ‘back’,

handler: function ()

{

TestApp.views.viewport.setActiveItem(0, { type: ‘slide’, direction: ‘right’ });

}

}]

});

TestApp.views.viewport = new Ext.Panel({

fullscreen: true,

layout : ‘card’,

cardAnimation : ‘slide’,

items: [

list,

{

xtype: ‘panel’,

html:’Test Panel to demonstrate different Transitions.’,

dockedItems: TestApp.views.topToolbar

}

]

});

}

});

Form Elements in Sencha

var App = new Ext.Application({

name: ‘TestApp’,

useLoadMask: true,

launch: function () {

new Ext.form.FormPanel({

fullscreen: true,

title : ‘Testing Form Fields’,

items: [

{

xtype : ‘sliderfield’,

label : ‘Volume’,

value : 5,

minValue: 0,

maxValue: 10

},{

xtype : ‘checkboxfield’,

label        : ‘Checkbox’,

checked        : ‘yes’

},{

xtype : ‘togglefield’,

label        : ‘Toggle’

},{

xtype : ‘datepickerfield’,

label        : ‘Date Picker Field’

},{

xtype : ’emailfield’,

label        : ‘Email Field’

},{

xtype : ‘spinnerfield’,

label        : ‘Spinner Field’

},{

xtype : ‘textfield’,

label        : ‘Text Field’

},{

xtype : ‘textareafield’,

label        : ‘Text Area Field’

}],

});

}

});

Simple Data Store Application in Sencha

var App = new Ext.Application({

name: ‘TestApp’,

useLoadMask: true,

launch: function () {

Ext.regModel(‘Contact’, {

fields: [‘firstName’, ‘lastName’]

});

var store = new Ext.data.JsonStore({

model : ‘Contact’,

data: [

{firstName: ‘Tommy’, lastName: ‘Maintz’},

{firstName: ‘Rob’, lastName: ‘Dougan’},

{firstName: ‘Ed’, lastName: ‘Spencer’},

{firstName: ‘Jamie’, lastName: ‘Avins’},

{firstName: ‘Aaron’, lastName: ‘Conran’},

{firstName: ‘Dave’, lastName: ‘Kaneda’},

{firstName: ‘Michael’, lastName: ‘Mullany’},

{firstName: ‘Abraham’, lastName: ‘Elias’},

{firstName: ‘Jay’, lastName: ‘Robinson’}

]

});

var list = new Ext.List({

fullscreen: true,

itemTpl : ‘{firstName} {lastName}’,

indexBar: true,

store: store

});

list.show();

}

});

What is Ext.apply?

Ext.apply is a Sencha function to copy objects.
Ext.apply(, );

You can have multiple source object names separated by comma.

Why do we need Ext.apply? Isn’t = enough? No, its not. Not only because you can merge and copy multiple sources to the destination there is also the big reason that, just a simple ‘=’ copies only the reference of the source object to the destination. Which means that if, you make any change to the destination object after copy it will affect the source copy too!