Code:
Ext.define('modCars', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Brand', type: 'string' },
{ name: 'Model', type: 'string' },
{ name: 'available', type: 'bool'}]
});
var cars = Ext.create('Ext.data.Store', {
model: 'modCars',
data: [
{ Id: '1', Brand: 'BMW', Model: '1' },
{ Id: '2', Brand: 'BMW', Model: '3' },
{ Id: '3', Brand: 'BMW', Model: '5' },
{ Id: '4', Brand: 'BMW', Model: '7' }
]
});
var gridCars =
Ext.create('Ext.grid.Panel', {
store: cars
, selModel: {
selType: 'cellmodel'
}
, anchor: '100%, 100%'
, plugins: [cellEditing]
, columns: [
{
xtype: 'checkcolumn'
, header: ' '
, dataIndex: 'available'
, width: 50
}
,
{
text: 'Id'
, dataIndex: 'Id'
}
,
{
text: 'Brand'
, dataIndex: 'Brand'
}
,
{
text: 'Model'
, dataIndex: 'Model'
}
]
, dockedItems: [
{
dock: 'bottom',
xtype: 'toolbar',
items: [
{
text: Localize('All')
, handler: function () {
autos.each(function (record) {
record.set('available', true);
});
}
}
,
{
text: Localize('None')
, handler: function () {
autos.each(function (record) {
record.set('available', false);
});
}
}
]
}
]
});
var windowCars = Ext.createWidget('window', {
title: Localize('Cars')
, closable: true
, closeAction: 'hide'
, resizable: false
, width: 350
, height: 350
, layout: 'anchor'
, bodyBorder: false
, bodyStyle: 'padding: 5px;'
, items: [gridCars]
});
Ext.define('clsFrmCars', {
extend: 'Ext.form.Panel',
layout: 'anchor',
initComponent: function () {
this.items =
[
{
xtype: 'container',
items:
[
{
xtype: 'button',
text: 'Show Window',
handler: function() {
windowCars.show();
}
}
]
}
]
clsFrmCars.superclass.initComponent.call(this);
}
});