Introducing...
http://github.com/revolunet/Ext.ux.FileBrowser
Ext.create('Ext.data.Store', {
storeId:'usersStore'
autoLoad:true,
pageSize: 25,
proxy: {
type: 'ajax',
url : '/path/to/user-list.php',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.create('Ext.grid.Panel', {
title:'Users List',
store:'usersStore',
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'usersStore',
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
Ext.define('MyApp.UserGridPanel', {
extend: 'Ext.grid.Panel',
title: 'Users list',
initComponent: function() {
var userStore = new Ext.data.store({
autoLoad:true,
pageSize: 25,
proxy: {
type: 'ajax',
url : '/path/to/user-list.php',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.apply(this, {
store:userStore,
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
store:userStore
}],
});
MyApp.UserGridPanel.superclass.initComponent.apply(this, arguments);
}
});
| Native | Web App | Hybrid | |
| Device API | |||
| Store / Market | |||
| Cross-device dev | |||
| Instant update | |||
| Linkable | |||
| Offline |
var App = new Ext.Application({
name : 'QuizzApp',
launch : function () {
QuizzApp.views.home = new Ext.Panel({ // home screen
items:[
{ html:'welcome to supa quizz' },
new Ext.Button({
text:'Start now!',
handler: function () {
// show questions
QuizzApp.views.viewport.setActiveItem('questions', {type: 'slide', direction: 'left'});
}
})
],
dockedItems: new Ext.Toolbar({
title: 'Supa Quizz test app'
})
[...],
});
QuizzApp.views.questions = new Ext.Carousel({ // questions carousel
id:'questions',
direction:'horizontal',
items:[],
cardTpl:new Ext.XTemplate(
'',
'{text} ',
''
),
listeners:{
beforeactivate:function() {
Ext.getStore('QuestionStore').load();
}
}
});
QuizzApp.views.viewport = new Ext.Panel({ // main viewport
fullscreen: true,
layout:'card',
cardAnimation:'slide',
items:[
QuizzApp.views.home,
QuizzApp.views.questions,
QuizzApp.views.results,
[...]
]
});
}
});
