1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default Not able to sort grid column on click of column header

    Not able to sort grid column on click of column header


    Hi

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

    I am using gridpanel

    Thanks
    aMaN

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


    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'
    });

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    What do all these renderers do?

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

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


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

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  8. #8
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


    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
    }
    }

  9. #9
    Sencha User
    Join Date
    Jun 2010
    Posts
    280
    Vote Rating
    0
    amanind is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Could you post your store/reader config and the renderer code?
    Here is my code file
    Attached Files

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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?

Similar Threads

  1. [DEFER] [3.2.2] Grid Column Header sort Icon missing
    By Mjollnir26 in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 8 Nov 2010, 1:43 AM
  2. Replies: 3
    Last Post: 3 Nov 2010, 4:46 PM
  3. Replies: 4
    Last Post: 27 May 2008, 9:10 PM

Thread Participants: 2