This is my code:




Ext.onReady(function(){
Ext.Ajax.request({
url: 'siteSpecificPageDataCopy.php',
params: { siteName:document.forms[0].sitename.value,
selectedMakeId: document.forms[0].selectedMakeId.value
},
success: function (response)
{
var input = Ext.JSON.decode(response.responseText);
function dynamicFnc(rootid, title, colid)
{
var storeId = Ext.create( 'Ext.data.JsonStore', {
fields: [{name:'text', type: 'string'}, {name:'value', type:'string'}],
autoLoad: true,
proxy: {
type: 'ajax',
url: "sitespecificPageData.php?siteName="+document.getElementById('sitename').value+"&selectedMakeId="+document.getElementById('selectedMakeId').value,
reader: {
id: 'id',
root: rootid,
type: 'json',
}
}
});


var tools = [
{
xtype:'tool',
type:'minimize',
iconCls: 'x-tool-minimize',
handler: function(event, toolEl, panelHeader, tool)
{
panelHeader.ownerCt.toggleCollapse();
}
},
{
xtype:'tool',
type:'maximize',
iconCls: 'x-tool-maximize',
handler: function(event, toolEl, panelHeader, tool)
{
//createWindow(panelHeader.id, panelHeader.title);
//console.log(panelHeader.id, panelHeader.title);
}
},
{
type:'close',
handler: function(event, toolEl, panelHeader, tool)
{
panelHeader.ownerCt.close(panelHeader, true);
}
}
];

Ext.define('Ext.app.GridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.gridportlet',

/**
* Custom function used for column renderer
* @param {Object} val
*/
change: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},

/**
* Custom function used for column renderer
* @param {Object} val
*/
pctChange: function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
},

initComponent: function(){

Ext.apply(this, {
title:title,
height: this.height,
store: storeId,
stripeRows: true,
columnLines: true,
autoScroll: true,
//style : 'margin-bottom: 10px',
tools:tools,
renderTo: document.body,
draggable: {
onDrag: function(e) {
var el = this.proxy.getEl();
this.x = el.getLeft(true);
this.y = el.getTop(true);
},
endDrag: function(e) {
this.panel.setPosition(this.x, this.y);
}
},
columns: [
{header: 'Description', width: 160, sortable: true, dataIndex: 'text', flex: 1},
{header: 'Value', width: 105, sortable : true, dataIndex: 'value', renderer: this.pctChange}
]
});
this.callParent(arguments);
}
});

var gridPanel = Ext.create('Ext.app.GridPanel')
return gridPanel;
}


Ext.create('Ext.app.Portal');


for (var key in input)
{
var panel = input[key];
var boxnos = panel.noofbox;
var columns = panel.columns;
for(var j=0; j<boxnos; j++)
{
var rootid = columns.root;
var colid = columns.column;
var getTitle = columns.title;
var columninfo = Ext.getCmp(colid[j]);
var grids = dynamicFnc(rootid[j],getTitle[j], colid[j]);
columninfo.add(grids);
columninfo.doLayout();
}
}
}
});
});

Please refer the image, if i drag and drop it looks like below shown. Doesn't fit properly.

Capture.jpg