Skip to content

Instantly share code, notes, and snippets.

@pphetra

pphetra/gist:3321934

Created August 11, 2012 06:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pphetra/3321934 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pphetra/3321934 to your computer and use it in GitHub Desktop.
Download ZIP
grade & pie chart
Raw
gistfile1.html
<html>
<head>
<link rel="stylesheet" href="www/extjs/resources/css/ext-all.css">
<script src="www/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function() {
Ext.define('GradeResult', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
{name: 'score', type: 'int'},
'grade'
]
})
store = Ext.create('Ext.data.Store', {
model: 'GradeResult',
listeners: {
'update': function(st, model, operation) {
gradeGroupStore.each(function(m) {
m.set('qty', 0)
});
store.each(function(m) {
var target = gradeGroupStore.getById(m.get('grade'));
target.set('qty', target.get('qty') + 1);
});
}
},
data: [
{id: '792993991', name: 'xxxx', score: 40},
{id: '792193992', name: 'xxxx', score: 30},
{id: '792292993', name: 'xxxx', score: 20},
{id: '792392995', name: 'xxxx', score: 60},
{id: '792492996', name: 'xxxx', score: 70},
{id: '792592997', name: 'xxxx', score: 20},
{id: '792692998', name: 'xxxx', score: 92},
{id: '792992999', name: 'xxxx', score: 47},
{id: '792933990', name: 'xxxx', score: 43},
{id: '792933991', name: 'xxxx', score: 40},
{id: '792933992', name: 'xxxx', score: 59},
{id: '792933993', name: 'xxxx', score: 42},
{id: '792933994', name: 'xxxx', score: 40},
{id: '792933995', name: 'xxxx', score: 70},
{id: '792933996', name: 'xxxx', score: 40},
{id: '792933997', name: 'xxxx', score: 80},
{id: '792933998', name: 'xxxx', score: 82},
{id: '792933999', name: 'xxxx', score: 40},
{id: '792933999', name: 'xxxx', score: 90},
{id: '792992991', name: 'xxxx', score: 32},
{id: '792992992', name: 'xxxx', score: 41},
{id: '792992993', name: 'xxxx', score: 78},
{id: '792992994', name: 'xxxx', score: 65},
{id: '792992995', name: 'xxxx', score: 89},
{id: '792992996', name: 'xxxx', score: 76}
]
})
Ext.define('Grade', {
extend: 'Ext.data.Model',
idProperty: 'code',
fields: [
"code",
{name: "qty", type: 'int', default: 0}
]
});
var gradeStore = Ext.create('Ext.data.Store', {
model: 'Grade',
data: [
{code: 'A'},
{code: 'B'},
{code: 'C'},
{code: 'D'},
{code: 'E'}
]
});
gradeGroupStore = Ext.create('Ext.data.Store', {
model: 'Grade',
data: [
{code: ''},
{code: 'A'},
{code: 'B'},
{code: 'C'},
{code: 'D'},
{code: 'E'}
]
})
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'grid',
flex: 1,
selModel: {
selType: 'cellmodel'
},
store: store,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
features: [
{ftype: 'summary'}
],
columns: [
{
header: 'id',
dataIndex: 'id'
},
{
header: 'name',
dataIndex: 'name',
flex: 1
},
{
header: 'score',
dataIndex: 'score',
summaryType: 'average'
},
{
header: 'grade',
dataIndex: 'grade',
field: {
xtype: 'combo',
queryMode: 'local',
store: gradeStore,
displayField: 'code'
}
}
]
},
{
xtype: 'chart',
store: gradeGroupStore,
series: [{
type: 'pie',
angleField: 'qty',
label: {
field: 'code',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}],
flex: 1
}
]
});
});
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment