Not able to sort grid column on click of column header

[amanind]

Hi

My column data is not sorting when i clcik on header of the column, any help.

I am using gridpanel

Thanks
aMaN

[Condor]

Did you define your columns with sortable:true (or your columnmodel with defaultSortable:true)?

[amanind]

this is my grid code

grid2 = new Ext.grid.GridPanel({
store: store,
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{ id: 'id', header: "Id", width: 20, renderer: this.showInvestmentIdData, dataIndex: 'id', hidden: true },
{ header: "Fund", width: 150, renderer: this.showFundData, sortable: true, dataIndex: 'fund' },
{ header: "Region", width: 100, renderer: this.showRegionData, sortable: true, dataIndex: 'region' },
{ header: "Investment", width: 300, renderer: this.showInvestData, sortable: true, dataIndex: 'investment' },
{ header: "System Copy", width: 80, renderer: this.showSystemCopy, align: "center", dataIndex: 'systemCopy' },
{ header: "Model Status", width: 80, renderer: this.showModelStatus, align: "center", dataIndex: 'modelStatus' },
{ header: "Fund Signoff Status", width: 106, renderer: this.showFundStatus, align: "center", dataIndex: 'fundStatus' }
]
}),
width: 880,
height: 400,
frame: true,
viewConfig: {
enableRowBody: true
},
stripeRows: true,
iconCls: 'icon-grid'
});

[Condor]

What do all these renderers do?

You do know that a grid will sort on field data and not on renderer value?

[amanind]

renderer values come from JSON and I have define function for all of them.
Is there any solution for this

[plalx]

If you wish to perform a custom sorting, you can specify a sortType config when defining your fields for your store.

[Condor]

Could you post your store/reader config and the renderer code?

[amanind]

here is the code

MS.ImpactSisterApp.ModelDownloadPanel = Ext.extend(Ext.FormPanel, {
reportingPeriodData: null,
Data: null,
grid2: null,
showCopiedModels: true,

initComponent: function() {
var repPeriodCombo = new MS.ImpactSisterApp.ReportingPeriodCombo({ reportingPeriodData: this.reportingPeriodData, widthField: 310 });
var fundCombo = new MS.ImpactSisterApp.FundCombo({
fundData: this.fundData,
callFor: "getFundsForBpDataBump",
IncludeAllFunds: true,
showAll: true,
multiCheckCombo: true,
widthField: 310
});
var regionCombo = new MS.ImpactSisterApp.RegionCombo({
reportingPeriodId: repPeriodCombo.selectedItem.ReportingPeriodId,
fundId: this.fundId,
widthField: 310,
showAll: true,
multiCheckCombo: true
});
var investmentCombo = new MS.ImpactSisterApp.InvestmentCombo({
addOptionAll: true,
widthField: 310,
showAll: true,
listenReportingPeriodChange: true,
reportingPeriodId: repPeriodCombo.selectedItem.ReportingPeriodId,
multiCheckCombo: true
});
MS.ImpactSisterApp.SisterAppEventManager.on("fundComboChanged", this.getInvestments, this);
MS.ImpactSisterApp.SisterAppEventManager.on("regionComboChanged", this.getInvestments, this);
MS.ImpactSisterApp.SisterAppEventManager.on("loadInvestmentGrid", this.loadInvestGrid, this);

var reader = new Ext.data.ArrayReader({}, [
{ name: 'fund' },
{ name: 'region' },
{ name: 'investment' },
{ name: 'systemCopy' },
{ name: 'modelStatus' },
{ name: 'fundStatus' }
]);

var store = new Ext.data.Store({
data: [],
reader: new Ext.data.JsonReader({ id: '_id' }, MS.ImpactSisterApp.GridRecord)
});
grid2 = new Ext.grid.GridPanel({
store: store,
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{ id: 'id', header: "Id", width: 20, renderer: this.showInvestmentIdData, dataIndex: 'id', hidden: true },
{ header: "Fund", width: 150, renderer: this.showFundData, sortable: true, dataIndex: 'fund' },
{ header: "Region", width: 100, renderer: this.showRegionData, sortable: true, dataIndex: 'region' },
{ header: "Investment", width: 300, renderer: this.showInvestData, sortable: true, dataIndex: 'investment' },
{ header: "System Copy", width: 80, renderer: this.showSystemCopy, align: "center", dataIndex: 'systemCopy' },
{ header: "Model Status", width: 80, renderer: this.showModelStatus, align: "center", dataIndex: 'modelStatus' },
{ header: "Fund Signoff Status", width: 106, renderer: this.showFundStatus, align: "center", dataIndex: 'fundStatus' }
]
}),
width: 880,
height: 400,
frame: true,
viewConfig: {
enableRowBody: true
},
stripeRows: true,
iconCls: 'icon-grid'
});


var config = {
frame: true,
timeout: 60000,
renderTo: Ext.get("ModelDownloadContent"),
hideBorders: true,
header: false,
layout: 'table',
width: 910,
layoutConfig: {
columns: 2
},


items: [

{
xtype: 'panel',
width: 'auto',
buttonAlign : 'right',
colspan: 4,
height: 600,

items: [{
layout: 'column',
width: 900,
colspan: 4,
items: [{
xtype: 'label',
text: 'IMPACT MANAGEMENT MODEL FILE ACCESS',
style: 'padding:10px; font-size:16px; color:blue'
}]
}, {
layout: 'column',
width: 900,
items: [{
xtype: 'label',
text: 'Reporting Period',
style: 'padding-left:10px',
width: 120
}, repPeriodCombo, {
xtype: 'label',
text: 'Fund',
style: 'padding-left:20px',
width: 120
}, fundCombo]
}, {
layout: 'column',
width: 900,
style: 'padding-top:15px',
items: [{
xtype: 'label',
text: 'Region',
style: 'padding-left:10px',
width: 120
}, regionCombo, {
xtype: 'label',
text: 'Investment',
style: 'padding-left:20px',
width: 120
}, investmentCombo]
}, {
style: 'padding-left:820px; padding-top:15px',
layout: 'column',
items: [{
buttonAlign: 'right',
xtype: "button",
id: 'goButton',
name: 'goButton',
listeners: { 'click': function(){
var formPanel = Ext.getCmp('ModelDownload_form');
if (fundCombo.getRawValue() == "" || fundCombo.getRawValue() == fundCombo.emptyText) {
Ext.Msg.alert('Incomplete Details', 'Please select Fund');
return;
}
else if (regionCombo.getRawValue() == "" || regionCombo.getRawValue() == regionCombo.emptyText) {
Ext.Msg.alert('Incomplete Details', 'Please select Region');
return;
}

MS.ImpactSisterApp.SisterAppEventManager.fireEvent("GetMappedInvestmentModelsStatusFinal", { method: "GetMappedInvestmentModelsStatusFinal", "event": "getModeldownload", reportingPeriodId: repPeriodCombo.selectedItem.ReportingPeriodId, reportingName: repPeriodCombo.selectedItem.Name, regionId: regionCombo.regionId, fundId: fundCombo.fundId, investmentId: investmentCombo.investmentId, reportName: 'msDataDump' });
}, scope: this },
text: "Search"
}]
},{
layout: 'column',
width: 900,
style: 'padding-left:10px;padding-top:15px;',
items: [{
xtype: 'label',
text: 'Investments'
}]
}, {
layout: 'column',
width: 900,
style: 'padding-left:10px;padding-top:5px',
items: [grid2]
}]
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MS.ImpactSisterApp.ModelDownloadPanel.superclass.initComponent.apply(this, arguments);
grid2.on('cellclick', this.modelSelected, this);
this.on('render', this.onPanelRender, this);
},

onPanelRender: function(p) {
//this.ownerCt.on('show', this.refreshDetails, this);
},
refreshDetails: function(p) {
this.doLayout();
},

getInvestments: function() {
this.fundId = null;
this.regionId = null;
this.fundId = Ext.getCmp('ModelDownload_form').form.items.items[1].fundId;
this.regionId = Ext.getCmp('ModelDownload_form').form.items.items[2].regionId;
Ext.getCmp('ModelDownload_form').form.items.items[3].investmentId = "";
if (this.fundId == null || this.fundId == '' || this.regionId == null || this.regionId == '') {
var data = "";
grid2.getStore().loadData(data);
return
}
if (this.regionId == null || this.regionId == 0) {
this.regionId = null;
}
if (this.fundId == 0) {
this.fundId = null;
}

MS.ImpactSisterApp.SisterAppEventManager.fireEvent("getInvestmentsForFundData", { method: "getInvestmentsForFundData", regionID: this.regionId, fundUID: this.fundId, reportName: 'msDataDump' });
//MS.ImpactSisterApp.SisterAppEventManager.on("loadInvestmentCombo", this.loadInvestGrid, this);
},
loadInvestGrid: function() {
var data = arguments[0].reportData;
if (data.length != 0) {
grid2.getStore().loadData(data);
} else {
var data = "";
grid2.getStore().loadData(data);
Ext.Msg.alert('Model Download', 'No Results found');
}
},
enableGoButton: function() {
Ext.getCmp('goButton').enable().enabled = true
},
modelSelected: function(grid, rowIndex, cellIndex, e) {
var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
var data = record.get(fieldName);
var target = e.getTarget();
var id = Ext.id(target);

if (!record.data._noasset && (target.tagName == "A" || target.tagName == "IMG")) {
var modelId = record.json.Id;
var parStr = "?method=getModelDownload";
parStr += "&modelId=" + record.json.Id;
parStr += "&investmentName=" + record.json.Investment.Name;
parStr += "&periodName=" + Ext.getCmp('ModelDownload_form').form.items.items[0].value; ;
var url = MS.ImpactSisterApp.impactHttpHandlerUrl + parStr;

MS.ImpactSisterApp.SisterAppEventManager.fireEvent("checkConnection", { "method": "checkConnection", "event": "openNewWindow", "windowName": "DownloadModel", "url": url });
}

},
onDestroy: function() {
this.un('cellclick', this.modelSelected, this);
MS.ImpactSisterApp.SisterAppEventManager.un("loadInvestmentCombo", this.loadInvestGrid, this);
MS.ImpactSisterApp.SisterAppEventManager.un("fundComboChanged", this.getInvestments, this);
MS.ImpactSisterApp.SisterAppEventManager.un("regionComboChanged", this.getInvestments, this);
this.reportingPeriodData = null;
this.un('render', this.onPanelRender, this);
}
});

MS.ImpactSisterApp.msModelDownload = function(win,data)
{
if(data){
var reportPanel = new MS.ImpactSisterApp.ModelDownloadPanel({
id: 'ModelDownload_form',
name: 'ModelDownload_form',
fundData: data.fundData.data,
reportingPeriodData: data.reportingPeriod.data
});
}
};

MS.ImpactSisterApp.ModelDownloadPanel.prototype.showInvestmentIdData = function(value, meta, rec) {
if (rec.json.Investment == null) {
return
} else {
return rec.json.Investment.Id
}
}

MS.ImpactSisterApp.ModelDownloadPanel.prototype.showFundData = function(value, meta, rec) {
if (rec.json.Investment.Fund == null) {
return
} else {
return rec.json.Investment.Fund.Name
}
}
MS.ImpactSisterApp.ModelDownloadPanel.prototype.showRegionData = function(value, meta, rec) {
if (rec.json.Investment == null) {
return
} else {
return rec.json.Investment.Country.Region.Name
}
}
MS.ImpactSisterApp.ModelDownloadPanel.prototype.showInvestData = function(value, meta, rec) {
if (rec.json.Investment == null) {
return
} else {
return rec.json.Investment.Name
}
}
MS.ImpactSisterApp.ModelDownloadPanel.prototype.showSystemCopy = function(value, meta, rec) {
if(rec.json.Name == null) {
return
} else {
var val = '<a href="#"><img src="'+MS.ImpactSisterApp.SisterWebAppBase + 'icons/Download.bmp" id="download_' + rec.json.Id + '" /></a>';
return val
}
}
MS.ImpactSisterApp.ModelDownloadPanel.prototype.showModelStatus = function(value, meta, rec) {
if(rec.json.Name == null) {
return
} else {
var val = "Final";
return val
}
}
MS.ImpactSisterApp.ModelDownloadPanel.prototype.showFundStatus = function(value, meta, rec) {
if(rec.json.Name == null) {
return
} else {
var val = "Final";
return val
}
}

[amanind]

Could you post your store/reader config and the renderer code?

Here is my code file

[Condor]

Yes, that might not work. Your renderers don't use the dataIndex to get the data, but sorting will be done on the dataIndex.

Could you post the code for MS.ImpactSisterApp.GridRecord and a sample of your JSON data?