My basic problem is this, I have a page with 3 grids, all of which have paging toolbars. All grid render on page load. When the page loads, only 1 of the 3 toolbars actually works. The other 2 don't show page numbers, and all buttons are greyed out. I've tried everything I can think of, but if they all populate on page load, only 1 works. If they render separately, say with a button click on the page, the toolbars work perfectly.
Has anyone else had this issue and solved it?
Multiple Grid and Multiple Paging Toolbar in single Window on page Load in Extjs
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
var userStore1 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
var userStore2 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
Ext.create('Ext.window.Window', {
height: 600,
width: 400,
xtype: 'panel',
layout: 'fit',
title:'Multiple Grid and Multiple Toolbar in single Window on page Load',
items:
[
{
layout: 'border',
height: 350,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'panel',
region: 'north',
layout: 'fit',
items: [
{
xtype: 'grid',
store: userStore1,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore1,
dock: 'bottom',
displayInfo: true,
},
]
},
{
xtype: 'panel',
region: 'center',
items: [
{
xtype: 'grid',
store: userStore2,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore2,
dock: 'bottom',
displayInfo: true,
}]
},
{
xtype: 'panel',
region: 'south',
items: [
{
xtype: 'grid',
id: 'GridId',
store: userStore,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
}],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore,
dock: 'bottom',
displayInfo: true,
}]
}]
}]
}).show();
});
Related
I am novice for jquery. I want to make some code for setting some form object in tab in layout in w2ui. I found some javascript library looking good name w2ui. (http://w2ui.com/web/demo/tabs)
Below are my code strugging. I want to layout grid1 and grid2 object in layout.main position using tab.
There aren't related code for resoling this issue.
Thanks in advance.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>
<body>
<div id="layout" style="width: 100%; height: 250px;"></div>
<script>
$(function () {
var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
{ type: 'bottom', size: 50, resizable: true, style: pstyle, content: 'bottom' }
]
});
$('#layout.main').w2tabs({
name: 'tabs',
active: 'tab1',
tabs: [
{ id: 'tab1', text: 'Tab 1' },
{ id: 'tab2', text: 'Tab 2' }
]
});
});
var grid1 = {
name: 'grid1',
columns: [
{ field: 'fname', caption: 'First Name', size: '180px' },
{ field: 'lname', caption: 'Last Name', size: '180px' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' }
],
records: [
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe#gmail.com', sdate: '4/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe#gmail.com', sdate: '4/3/2012' }
]
};
var grid2: {
name: 'grid2',
columns: [
{ field: 'state', caption: 'State', size: '80px' },
{ field: 'title', caption: 'Title', size: '100%' },
{ field: 'priority', caption: 'Priority', size: '80px', attr: 'align="center"' }
],
records: [
{ recid: 1, state: 'Open', title: 'Short title for the record', priority: 2 },
{ recid: 2, state: 'Open', title: 'Short title for the record', priority: 3 },
{ recid: 3, state: 'Closed', title: 'Short title for the record', priority: 1 }
]
};
</script>
</body>
</html>
Here you go.
onClick: function (event) {
switch (event.target)
{
case 'tab1': w2ui['layout'].content('main', w2ui.grid1); break;
case 'tab2': w2ui['layout'].content('main', w2ui.grid2); break;
}
}
and full page
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>
<body>
<div id="layout" style="width: 100%; height: 250px;"></div>
<script>
$(function () {
// load grid into memory
$().w2grid({
name: 'grid1',
columns: [
{ field: 'fname', caption: 'First Name', size: '180px' },
{ field: 'lname', caption: 'Last Name', size: '180px' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' }
],
records: [
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe#gmail.com', sdate: '4/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe#gmail.com', sdate: '4/3/2012' }
]
});
$().w2grid({
name: 'grid2',
columns: [
{ field: 'state', caption: 'State', size: '80px' },
{ field: 'title', caption: 'Title', size: '100%' },
{ field: 'priority', caption: 'Priority', size: '80px', attr: 'align="center"' }
],
records: [
{ recid: 1, state: 'Open', title: 'Short title for the record', priority: 2 },
{ recid: 2, state: 'Open', title: 'Short title for the record', priority: 3 },
{ recid: 3, state: 'Closed', title: 'Short title for the record', priority: 1 }
]
});
var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle,
tabs: {
name: 'tabs',
active: 'tab1',
tabs: [
{ id: 'tab1', text: 'Tab 1' },
{ id: 'tab2', text: 'Tab 2' }
],
onClick: function (event) {
switch (event.target)
{
case 'tab1': w2ui['layout'].content('main', w2ui.grid1); break;
case 'tab2': w2ui['layout'].content('main', w2ui.grid2); break;
}
}
}
},
{ type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
{ type: 'bottom', size: 50, resizable: true, style: pstyle, content: 'bottom' }
]
});
w2ui['layout'].content('main', w2ui.grid1);
});
</script>
</body>
</html>
The grid displays and retrieves the data from the rest service but does not show up. I'm pretty sure I'm just missing something stupid but I've checked the documentation and a few other answers on here and nothing has fixed it. I can see in the debugger the data is coming across (which is where I pulled the sample from) and there are no JavaScript errors on the page. I also checked the data and it's valid JSON. What am I missing/doing wrong?
Code:
<table id="custSearch">
<tr><td></td></tr>
</table>
<div id="custSearchPager"></div>
$("#custSearch").jqGrid({
url : '/rebate/rest/customer/getCustomers',
datatype : 'json',
mtype : 'GET',
colNames : ['customerID', 'Company', 'First Name', 'Last Name','Address', 'City', 'State', 'Zip Code', 'Phone', 'Fax', 'EMail'],
colModel : [
{ name:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
{ name:'Company', index:'company', width:150, sortable:true},
{ name: 'First Name', index: 'firstName', length: 50, search: false},
{ name: 'Last Name', index: 'lastName', width: 80},
{ name: 'Address', index: 'address', width: 100, search: false},
{ name: 'City', index: 'city', width: 40, search: false},
{ name: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} },
{ name: 'Zip', index: 'zip', width: 80},
{ name: 'Phone', index: 'phone', width: 80},
{ name: 'Fax', index: 'fax', width: 80, search: false},
{ name: 'EMail', index: 'email', width: 80}
],
rowNum: 20,
rowList:[10,20,30],
pager : '#custSearchPager',
sortname : 'company',
sortorder : 'desc',
viewrecords: true,
gridview: true,
caption : 'Customers',
height: '300',
jsonReader: {cell:"", id:"customerID"}
});
jQuery("#custSearch").jqGrid('navGrid','#custSearchPager',{edit:false,add:false,del:false,search:true});
Data:
{"page":"1","total":"30","records":"20","rows":[
{"customerID":144,"firstName":"Keefe","lastName":"Abbott","company":"Vulputate LLC","address":"P.O. Box 688, 4718 Urna Street","country":"USA","city":"Detroit","state":"MI","zip":"61733","phone":"(411) 256-3885","fax":"(712) 531-0718","email":"Etiam#Integereu.org"},
{"customerID":91,"firstName":"Jerome","lastName":"Allison","company":"Vulputate Inc.","address":"Ap #519-7407 Orci Road","country":"USA","city":"Kansas City","state":"MO","zip":"22551","phone":"(245) 214-4028","fax":"(202) 531-5933","email":"sed.dolor.Fusce#risusDonec.ca"},
{"customerID":293,"firstName":"Hyacinth","lastName":"Fuentes","company":"Vulputate Corporation","address":"Ap #899-7402 Donec Road","country":"USA","city":"Jackson","state":"MS","zip":"27829","phone":"(342) 945-6263","fax":"(260) 216-3339","email":"felis.Donec.tempor#sitamet.org"},
{"customerID":235,"firstName":"Charde","lastName":"England","company":"Vulputate Associates","address":"2803 Odio Street","country":"USA","city":"Racine","state":"WI","zip":"17971","phone":"(421) 324-5019","fax":"(559) 946-7839","email":"pretium#eu.org"}
. . .
]}
The names in colModel can't contain spaces. I think you have mixed the name and the label property in colModel to display headers of the table.
The wrong in your code is that the name property does not match the data from the response and second your name property contain space, which is not allowed. To work this your colModel should be:
colModel : [
{ name:'customerID', label:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
{ name:'company', label:'Company', index:'company', width:150, sortable:true},
{ name: 'firstName', label: 'First Name', index: 'firstName', length: 50, search: false},
{ name:'lastName', label: 'Last Name', index: 'lastName', width: 80},
{ name: 'address', label: 'Address', index: 'address', width: 100, search: false},
{ name: 'city', label: 'City', index: 'city', width: 40, search: false},
{ name:'state', label: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} },
{ name:'zip', label: 'Zip', index: 'zip', width: 80},
{ name:'phone', label: 'Phone', index: 'phone', width: 80},
{ name: 'fax', label: 'Fax', index: 'fax', width: 80, search: false},
{ name: 'email', label: 'EMail', index: 'email', width: 80}
],
I want to sort my grid with a combobox, I want that when I select a value on the combobox, the content of the grid change for example by type can anyone help me? thanks
this a snippet of my code:
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
store: pagingStore,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
},
{
text: 'Type',
dataIndex: 'type'
}],
bbar: {
xtype: 'pagingtoolbar',
store: pagingStore,
displayInfo: true,
items: [
'-', {
xtype: 'combo',
fieldLabel: 'List account',
labelAlign: 'right',
store: storeCombo,
displayField: 'name'
}]
},
renderTo: Ext.getBody()
});
You probably want something like this:
Ext.create('Ext.grid.Panel', {
height: 400,
title: 'Simpsons',
store: {
fields: ['name', 'email', 'phone', 'type'],
data: [{
name: 'Homer',
email: 'homer#simpsons.com',
phone: '111-222-333',
type: 'Foo'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '111-222-334',
type: 'Foo'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '111-222-335',
type: 'Bar'
}, {
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '111-222-336',
type: 'Bar'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'Type',
dataIndex: 'type'
}],
bbar: {
xtype: 'toolbar',
items: [
'-', {
xtype: 'combo',
fieldLabel: 'List account',
labelAlign: 'right',
forceSelection: true,
emptyText: '-- Select --',
store: {
fields: ['type'],
data: [{
type: 'Foo'
}, {
type: 'Bar'
}]
},
displayField: 'type',
valueField: 'type',
listeners: {
change: function(combo, value) {
var grid = this.up('grid'),
store = grid.getStore();
if (!value) {
store.getFilters().removeAll();
} else {
store.filter([{
property: 'type',
value: value
}]);
}
}
}
}
]
},
renderTo: Ext.getBody()
});
https://fiddle.sencha.com/#fiddle/1hn4
My app has a grid and a form (for record detail).
when I update a record I intended to be simultaneously updated the grid and the form (before store.sync()).
Any idea how to do this?
In the case of my fiddle, after the update (edit button), the form only updates if you click in another grid row and re-click again on the edited row.
Fiddle: https://fiddle.sencha.com/#fiddle/12v7
EDITED: see comments.
https://fiddle.sencha.com/#fiddle/1303
Use data binding: Fiddle
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: ''
}]
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
xtype: 'layout-horizontal-box',
width: 800,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
flex: 1,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{user}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 2
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 2
}],
tbar: [{
xtype: 'form',
items: [{
xtype: 'textfield',
name: 'name',
bind: '{user.name}'
}, {
xtype: 'textfield',
name: 'email',
bind: '{user.email}'
}, {
xtype: 'textfield',
name: 'phone',
bind: '{user.phone}'
}]
}],
}, {
xtype: 'form',
flex: 1,
margin: '0 10 0 0',
items: [{
xtype: 'displayfield',
fieldLabel: 'Name',
name: 'name',
bind: '{user.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
name: 'email',
bind: '{user.email}'
}, {
xtype: 'displayfield',
fieldLabel: 'Phone',
name: 'phone',
bind: '{user.phone}'
}]
}]
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 800,
height: 400
});
}
});
I tried to add validation to my form using formBind: true
The validation isn't occuring though (the save button is not greyed out). The validation that the text field is not blank is occuring, but binding it to the Save button seems to do nothing.
If you double click a record it will show the form in question. This can be seen here:
http://jsfiddle.net/byronaltice/7yz9oxf6/32/
Code below in case anyone can't access jsfiddle:
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'
}]
}, {
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [{
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) {
var formWindow = Ext.create('SessionForm');
formWindow.show();
var form = formWindow.down('form');
form.loadRecord(record);
}
},
store: {
fields: [
'id', {
name: 'title',
sortType: 'asUCText'
},
'approved', {
dateFormat: 'c',
name: 'sessionTimeDateTime',
sortType: 'asDate',
type: 'date'
}, {
convert: function (v, rec) {
var convertIt = Ext.util.Format.dateRenderer('m/d/Y g:i a'),
pretty = convertIt(rec.get("sessionTimeDateTime"));
return pretty;
},
name: 'sessionTimePretty',
type: 'string'
}],
autoLoad: true,
autoSync: true,
data: [{
id: 101,
sessionTimeDateTime: '2014-08-27T21:00:00.000+0000',
title: 'JS for D',
approved: true
}, {
id: 102,
sessionTimeDateTime: '2014-10-27T22:30:00.000+0000',
title: 'CS for S',
approved: false
}, {
id: 105,
sessionTimeDateTime: '2014-09-27T20:30:00.000+0000',
title: 'XxtJS for E',
approved: false
}, {
id: 104,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ZXxtJS for E',
approved: true
}, {
id: 103,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ExtJS for E',
approved: true
}],
sorters: [{
property: 'title'
}],
groupField: 'sessionTimeDateTime'
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
}, {
xtype: 'gridcolumn',
dataIndex: 'title',
text: 'Title',
flex: 1,
minWidth: 100,
width: 75
}, {
xtype: 'gridcolumn',
dataIndex: 'approved',
text: 'Approved'
}, {
dataIndex: 'sessionTimePretty',
text: 'Session Start Time',
width: 180
}],
features: [{
ftype: 'grouping',
groupHeaderTpl: [
'{[values.rows[0].get(\'sessionTimePretty\')]} (Session Count: {rows.length})']
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'border'
//align: 'stretch'
},
items: [{
region: 'west',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
split: true,
items: [{
xtype: 'sessionGridPanel',
flex: 1
}, {
xtype: 'splitter',
width: 1
}, {
html: '<b>Speakers Panel</b>',
flex: 1,
xtype: 'panel'
}]
}, {
region: 'center',
html: '<b>Details Panel</b>',
flex: 1,
xtype: 'panel',
title: 'Details Panel',
collapsible: true,
collapsed: true,
collapseDirection: 'right'
}]
});
}
});
From Sencha API Documentation:
Any component within the FormPanel can be configured with formBind: true.
The problem is you are using the attribute formBind outside the form component
You can correct your code in this way:
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
// ...
items: [{
xtype: 'form',
items: [{
// your form items
}],
buttons: [{
xtype: 'button',
text: 'Save',
formBind: true,
handler: function (button) {
// also you should rewrite the following line
// to make it independant from the components structure
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
Your fiddle changed: http://jsfiddle.net/7yz9oxf6/34/