Code:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ux/ux-all.js"></script>
<script>
var iABSMainPanel = null;
function buildWireframeAccordion() {
var vTitlePanel = new Ext.Panel({
id: 'ABS_main-panel',
region: 'center',
title: 'Test Row Expander Plugin',
margins: '2 5 5 0',
border: false,
items: [],
layout: 'border'
});
var vDataPanel = new Ext.Panel({
layout: 'fit',
region: 'center',
split: true,
items: []
});
var vInnerPanel = new Ext.Panel({
layout: 'border',
split: true,
items: []
});
var vCustomStore = new Array();
vCustomStore.push("code");
vCustomStore.push("msg");
vCustomStore.push("det");
var vStore = new Ext.data.JsonStore({
root: 'list',
fields: vCustomStore
});
var vErrors = eval('({"list":[{"code":"EABASGEN0017","msg":"Group with key xyz not found.","det":"Detailed error message<br>bla bla bla"},{"code":"EABASABS0003","msg":"Job Queue sdsdsd does not exist","det":"Another Detailed error message<br>bla bla bla<br>bla bla bla<br>bla bla blab"}]})');
// Loads data
vStore.loadData(vErrors);
var vExpander = new Ext.ux.grid.RowExpander({
tpl: new Ext.Template('<b>Code:</b> {code}<br>', '<b>Details:</b> {det}')
});
vExpander.on('expand', function (aRowExpander, aRecord, aBody, aRowIndex) {
aRowExpander.grid.ownerCt.doLayout();
});
vExpander.on('collapse', function (aRowExpander, aRecord, aBody, aRowIndex) {
aRowExpander.grid.ownerCt.doLayout();
});
var vSM = new Ext.grid.RowSelectionModel({
singleSelect: true
});
var vCM = new Ext.grid.ColumnModel({
defaults: {
sortable: false
},
columns: [vExpander, {
id: 'msg',
dataIndex: 'msg'
}]
});
var vErrorPanel = new Ext.grid.GridPanel({
id: 'mypanel',
store: vStore,
cm: vCM,
viewConfig: {
// forceFit: true
},
sm: vSM,
//deferRowRender : false,
autoExpandColumn: 'msg',
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: true,
hideHeaders: true,
columnLines: true,
collapsible: true,
region: 'north',
autoHeight: true,
plugins: vExpander,
animCollapse: false,
title: 'Errors',
iconCls: 'icon-grid'
});
vInnerPanel.add(vErrorPanel);
var vObjPanel = new Ext.Panel({
id: 'MyObjectPanel',
header: true,
title: 'Test After Layout Event',
autoScroll: true,
split: true,
region: 'center',
layout: 'form',
items: []
});
vObjPanel.on("afterlayout", markInvalidFields, vObjPanel);
vInnerPanel.add(vObjPanel);
vDataPanel.add(vInnerPanel);
buildData(vObjPanel);
vTitlePanel.add(vDataPanel);
return vTitlePanel;
}
function buildData(aObjPanel) {
var vObjectFields = new Array();
for (var x = 0; x < 30; x++) {
vObjectFields.push(new Ext.form.TextField({
id: "Field" + x,
allowBlank: true,
fieldLabel: 'Field ' + x
}));
}
aObjPanel.add(vObjectFields);
}
var iCall = 0;
function markInvalidFields(aComponent) {
iCall++;
var vField = Ext.get("Field3");
vField.focus();
alert("invoke nbr" + iCall);
}
Ext.onReady(function () {
iABSMainPanel = buildWireframeAccordion();
var vView = new Ext.Viewport({
layout: 'border',
items: [iABSMainPanel]
});
})
</script>
</head>
</body>
</body>
</html>
Another strange behaviour.
afterlayout event: too much call ?
