I am facing an issue with the EXTJS ver. 5, while using a collapsible grid in the hbox layout.
The functioanlity is that the data on the 'Observation Facts' grid will be displayed once the row of the search results is clicked and that row contains a Observation Flag set to 1.
Ths issue is that if I dont bind the store to the grid, there is no issue, expand and collapse are working perfectly, as soon as I bind the store to the grid, and try to doLayout(), I get "Layout run failed",
and the entire panel vanishes.See the 4th sceenshot (ss4)
PFA the code and the screenshots.
Request you to advise.
Code:
{
xtype : 'panel',
layout : {
type : 'hbox',
align : 'stretch'
},
itemId : 'groupPanel',
flex:1,
items : [
{
xtype : 'gridpanel',
title : 'Search Results',
flex:1,
itemId : 'searchResultsGrid',
store : 'facts.FactStore',
columns : [
{
xtype : 'gridcolumn',
dataIndex : 'LOBId',
text : translations['LOB'],
width : 150,
renderer : function(value) {
var rec = Ext.getStore('workflow.common.LOB').getById(
value);
if (rec)
return rec.get('LOBName');
else
return value;
}
},
{
xtype : 'gridcolumn',
dataIndex : 'FactType',
text : translations['FactType'],
width : 150,
renderer : function(value) {
var rec = Ext.getStore(
'workflow.collection.cm.facts.FactType')
.getById(value);
if (rec)
return rec.get('FactTypeDesc');
else
return value;
}
}, {
xtype : 'gridcolumn',
dataIndex : 'FactId',
text : translations['FactId'],
width : 200
}, {
xtype : 'gridcolumn',
dataIndex : 'FactDescription',
text : translations['FactDescription'],
flex:1
} ],
dockedItems : [ {
xtype : 'pagingtoolbar',
dock : 'bottom',
width : '',
store : 'facts.Facts',
displayInfo : true
} ],
viewConfig : {
stripeRows : true,
scroll : true,
listeners : {
cellmousedown : function(grid, td, cellIndex, record, tr,
rowIndex, e, eOpts) {
var columnType = grid.panel.columns[cellIndex].xtype;
if (columnType == 'gridcolumn') {
var panel = Ext.ComponentQuery
.query('#observationFactsGrid')[0];
var searchpanel = Ext.ComponentQuery
.query('#groupPanel')[0];
var ObservationFlag = record.data.ObservationFlag;
if (ObservationFlag === '1') {
var store = Ext.data.StoreManager
.lookup('facts.ObservationFactsStore');
store
.on(
'beforeload',
function(source, operation) {
operation
.setParams({
SearchFactObservationReq : Ext
.encode({
SearchFactObservationReq : {
LOBId : record.data.LOBId,
FactId : record.data.FactId
}
})
})
});
store.loadPage(1);
panel.expand(true);
}
else{
panel.collapse(true);
}
searchpanel.doLayout();
}
}
}
}
},
{
xtype : 'gridpanel',
collapseDirection : 'left',
collapsible : true,
hideCollapseTool : true,
flex:0,
collapsed : true,
title : 'Observation Facts',
itemId : 'observationFactsGrid',
store : 'facts.ObservationFactsStore',
columns : [ {
xtype : 'gridcolumn',
dataIndex : 'ObservationId',
text : 'Observation ID',
width:150
}, {
xtype : 'gridcolumn',
dataIndex : 'ObservationDesc',
text : 'Observation Name',
width: 150
} ],
dockedItems : [ {
xtype : 'pagingtoolbar',
dock : 'bottom',
store : 'facts.ObservationFactsStore',
displayInfo : true
} ],
viewConfig : {
stripeRows : true,
scroll : true
}
} ]
}
usePicker: false not working for datepickerfield