Archive for the ‘Sencha’ Category

17
Feb

Yes, it will!

All options like tabletStartupScreen, phoneStartupScreen, glossOnIcon etc that work for Ext.setup() will work with Ext.Application() or Ext.regApplication()

This is really comforting to know especially if, you are deciding on shifting to Sencha Touch MVC :)

, , , ,

15
Feb
Ext.Logger.deprecate('Sample Message.');

30
Jan
var panel = new Ext.Panel({
    fullscreen: true,
    items: [
        {
            xtype    : 'video',
            x        : 500,
            y        : 250,
            width    : 125,
            height   : 120,
            url      : "exmaple.mov",
            posterUrl: 'example.png'
        }
    ]
});

29
Jan

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

}

]

});

}

});

29
Jan

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'

}],

});

}

});

29
Jan

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();

}

});

26
Jan
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!

, , , , ,

23
Jan
var panel = new Ext.Panel({
    fullscreen: true,
    items: [{
        xtype: 'map',
        useCurrentLocation: true
    }]
});

source: sencha.com

17
Jan

syntax:

Ext.require({String/Array} expressions);

13
Jan
var actionSheet = new Ext.ActionSheet( {  // Creating an ActionSheet object

items: [     // Adding items to the ActionSheet

{

text: 'Delete',  // The text of the button

ui  : 'decline',  // Type of UI - decline will show the button in red color.

handler: function(c,e){  // Action, which will be called on clicking the button

Ext.Msg.alert('Delete', 'Clicked the delete button.', function(){console.log("Alert OK"); actionSheet.hide();}); // Showing an alert and on clicking the OK in the alert, hiding the ActionSheet.

}

}

]

});

 

 

Now to make the ActionSheet appear, use the following line.

actionSheet.show();

, ,