Ext Test Panels
HTML
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.1/examples/shared/example.css" />
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<script type="text/javascript">
</script>
<body></body>
JavaScript
Ext.application({
name: 'MyApp',
launch: function () {
//Popup form for items in grid panel
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
padding: 5,
width: 600,
title: 'Edit Sessions',
model: 'true',
items: [{
xtype: 'form',
bodyPadding: 10,
title: '',
items: [{
xtype: 'textfield',
name: 'title',
fieldLabel: 'Title',
labelWidth: 90,
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
allowBlank: false
}, {
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved'
}],
buttons: [{
xtype: 'button',
text: 'Save',
formBind: true,
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
//The grid panel area
Ext.define("SessionGridPanel", {
extend: 'Ext.grid.Panel',
alias: 'widget.sessionGridPanel',
listeners: {
itemdblclick: function (gridpanel, record, item, e) {
...