Views:
Tile-View
Ext.define('MyApp.view.TileView', {
extend: 'Ext.dataview.DataView',
alias: 'widget.mydataview',
config: {
baseCls: 'tile-data-view',
height: '100%',
id: 'tile-view',
width: '100%',
itemCls: 'tile',
store: 'ThemeStore',
scrollable: {
directionLock: true,
direction: 'horizontal',
momentumEasing: {
momentum: {
acceleration: 30,
friction: 0.5
},
bounce: {
acceleration: 0.0001,
springTension: 0.9999,
},
minVelocity: 3
},
outOfBoundRestrictFactor: 0
},
inline: {
wrap: false
},
itemTpl: [
'',
'
{name}
',
'
{numOfCourses} courses
',
'
'
]
},
initialize: function() {
this.callParent();
var me = this.container;
//me.setWidth(2080);
var el1 = Ext.get('MainContainer');
var parent = this.getParent();
//CSBfleXcroll.defer(1, window, [this.body.dom]);
//var scroller = me.getScrollable();
//console.info('My parent is : '+parent);
//console.info('Main container : '+el1.getHeight());
//console.info('scroller : '+ scroller);
}
});
My-Panel
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
requires: [
'MyApp.view.TileView'
],
config: {
layout: {
type: 'vbox'
},
scrollable: false,
items: [
{
xtype: 'titlebar',
docked: 'top',
itemId: 'top-bread-crumb',
items: [
{
xtype: 'button',
itemId: 'increase',
text: 'Increase'
},
{
xtype: 'button',
itemId: 'decrease',
text: 'Decrease'
}
]
},
{
xtype: 'mydataview',
itemId: 'tileview1',
flex: 1
}
],
listeners: [
{
fn: 'onIncreaseTap',
event: 'tap',
delegate: '#increase'
},
{
fn: 'onDecreaseTap',
event: 'tap',
delegate: '#decrease'
},
{
fn: 'onPanelPainted',
event: 'painted'
}
]
},
onIncreaseTap: function(button, e, eOpts) {
var tileView = this.down('#tile-view').container;
var h = tileView.getHeight();
var w = tileView.getWidth();
console.log('this get width : '+ this.getWidth());
console.log('height : '+ h + ' width : '+w);
tileView.setWidth(w+300);
},
onDecreaseTap: function(button, e, eOpts) {
var tileView = this.down('#tile-view').container;
var h = tileView.getHeight();
var w = tileView.getWidth();
console.log('this get width : '+ this.getWidth());
console.log('height : '+ h + ' width : '+w);
tileView.setWidth(w-300);
},
onPanelPainted: function(element, eOpts) {
console.log('on panel painted function');
this.containerHeight= this.element.getHeight();
this.containerWidth = this.element.getWidth();
console.log('h = '+ this.containerHeight +' w = '+ this.containerWidth);
var breadcrumb = this.down('#top-bread-crumb');
var h = breadcrumb.element.getHeight();
var w = breadcrumb.element.getWidth();
console.log('height = '+h +' widht = '+ w);
//this.setTileViewSize(h,w);
},
initialize: function() {
this.callParent();
var container = this.element;
this.containerHeight=0;
this.containerWidth=0;
console.log('container : '+container);
console.log('container width : '+ container.getWidth() + ' height : '+ container.getHeight());
var tileView = this.down('#tile-view').container;
tileView.setWidth(2080);
}
});
Store:
Ext.define('MyApp.store.ThemeStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.ThemeModel'
],
config: {
autoLoad: true,
model: 'MyApp.model.ThemeModel',
storeId: 'ThemeStore',
proxy: {
type: 'ajax',
url: 'data/test.json',
reader: {
type: 'json'
}
}
}
});
Model
Ext.define('MyApp.model.ThemeModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'code'
},
{
name: 'name'
},
{
name: 'numOfCourses'
}
]
}
});
Data
[
{
"code": "TH10",
"name": "Computer",
"numOfCourses": 5
},
{
"code": "TH11",
"name": "Midwifery",
"numOfCourses": 3
},
{
"code": "TH12",
"name": "Professional",
"numOfCourses": 7
},
{
"code": "TH13",
"name": "Sport and Exercise Science",
"numOfCourses": 4
},
{
"code": "TH14",
"name": "International Business",
"numOfCourses": 5
},
{
"code": "TH15",
"name": "Design Engineering",
"numOfCourses": 6
},
{
"code": "TH16",
"name": "Work Based Learning Studies",
"numOfCourses": 4
},
{
"code": "TH17",
"name": "Business Management",
"numOfCourses": 18
},
{
"code": "TH18",
"name": "Biology",
"numOfCourses": 4
},
{
"code": "TH2",
"name": "Languages",
"numOfCourses": 5
},
{
"code": "TH3",
"name": "Miscellaneous",
"numOfCourses": 36
},
{
"code": "TH5",
"name": "Financial",
"numOfCourses": 1
},
{
"code": "TH6",
"name": "Psychology",
"numOfCourses": 7
},
{
"code": "TH7",
"name": "Healthcare Science",
"numOfCourses": 5
},
{
"code": "TH8",
"name": "Criminology",
"numOfCourses": 6
},
{
"code": "TH9",
"name": "Other Course",
"numOfCourses": 6
}
]
