1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    lucastp is on a distinguished road

      0  

    Default Problem using Ext.getCmp on child items

    Problem using Ext.getCmp on child items


    Hi,

    I am quite new with extjs 4 so I would like to ask you help about the following code

    var showInWindow = {
    id:'commissionWindow',
    xtype:'commissionearned',
    url: '/app/getdata.json',
    storeRoot: 'data',
    width:800,
    height: 600,
    ytitle:'Lines Sold',
    xtitle: 'Day',
    xlabelsize: '12px Arial',
    ylabelsize: '12px Arial',
    style: 'background:#fff',
    legend: {
    position: 'right'
    },
    chartType: 'line',
    animate:true

    };
    var window_c = Ext.create('Ext.window.Window', {
    id:'myWin',
    closeAction: 'hide',
    modal:true,
    hidden: false,
    maximizable: true,
    title: 'Column Chart',
    layout: 'fit',
    items: [showInWindow]

    });

    My problem is that if I try to execute Ext.getCmp('commissionWindow') I get undefined as returned value.

    Does anyone know why the component showInWindow is not registered with the id 'commissionWindow'?

    Thank you,

    Luca.

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    548
    Vote Rating
    115
    Tim Toady is a name known to all Tim Toady is a name known to all Tim Toady is a name known to all Tim Toady is a name known to all Tim Toady is a name known to all Tim Toady is a name known to all

      0  

    Default


    Use code tags around your code [CODE]
    What is your definition of 'commissionearned'?

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    lucastp is on a distinguished road

      0  

    Default


    Hi,

    the code is the following

    Ext.define('APP.charts.CommissionEarned', {
    extend : 'Ext.chart.Chart',
    alias: 'widget.commissionearned',
    requires : ['APP.model.LinesSoldChart'],
    config: {
    width: 280,
    height: 170,
    url: '/app/linesSoldChart.json',
    storeRoot: 'data',
    theme: 'Red',
    xtitle: null,
    ytitle: null,
    xlabelsize:'9px Arial',
    ylabelsize:'9px Arial',
    ratio:9,
    style: null,
    chartType: 'column',
    animate:true
    },
    constructor: function(config) {
    this.initConfig(config);
    this.callParent([{theme: this.theme}]);
    },
    initComponent : function() {
    this.store = this.buildStore();
    this.axes = this.buildAxes();
    this.series = this.buildSeries();
    this.callParent();

    },
    buildStore: function() {

    Ext.define('CommissionEarned', {
    extend: 'Ext.data.Model',
    fields: [{name:'commission', type:'int'}, {name:'year', type:'date', dateFormat: 'Y-m-d H:i'}]
    });
    return Ext.create('Ext.data.Store', {
    model: 'CommissionEarned',
    proxy: {
    type: 'ajax',
    url : this.url,
    reader: {
    type: 'json',
    root: this.storeRoot
    },
    extraParams:{type:'commission'},
    method: 'POST'
    },
    root: this.storeRoot,
    fields: this.fields,
    params: { type: 'commission'},
    autoLoad: true
    });

    },
    buildSeries: function(){

    return [
    { showMarkers: false,
    type: this.chartType,
    xField: 'year',
    yField: 'commission',
    yAxis: {
    labelRenderer: function(date) { return "£" + date; }
    },

    tips: {
    trackMouse: true,
    width: 150,
    height: 35,
    renderer: function(storeItem, item) {
    this.setTitle(Ext.util.Format.date(storeItem.get('year'),' D d F Y') + "<br/> <font color=\"blue\">Commission Earned:</font>" +storeItem.get('commission') +"$");
    // this.setTitle(storeItem.get('commission') + '$ Commission earned on ' + Ext.util.Format.date(storeItem.get('year'),' D Y-m-d'));
    }
    },
    style: {

    opacity: 0.93,
    size: 10
    },
    listeners:{
    itemmousedown : function(obj) {

    }
    }
    }
    ]

    },
    buildAxes : function(){
    var xlabel = this.xlabelsize;
    var ylabel = this.ylabelsize;
    return [

    {
    id: 'commission',
    type: 'Numeric',
    position: 'left',
    title: this.ytitle != null ? this.ytitle: null,
    animate: true,
    fields: ['commission'],
    minimum: 0,
    grid: true,
    titlePosition: 'top',
    label: {
    font: ylabel,
    renderer: function(com) {return com + " $";}
    }
    },
    {
    id: 'year',
    type: 'Time',
    position: 'bottom',
    title: this.xtitle != null ? this.xtitle: null,
    grid: true,
    dateFormat: 'd F', //'Y-m-d',
    ratio: this.ratio,
    filterInflection: function(index) {
    //alert(this);
    return ((index % this.ratio) == 0);
    },
    fields: ['year'],
    label: {
    font: xlabel,
    renderer: function(date) { return Ext.util.Format.substr(date,0,6); }
    }
    }
    ];
    },
    changeChartScale: function(ratio,pos) {
    this.axes.get(pos).filterInflection = function(index) {
    return ((index % ratio) == 0);
    }
    },
    loadStoreByParams : function(params) {
    params = params || {};
    this.store.load({
    params : params
    });
    },
    setType : function(chartType) {
    this.chartType = chartType;
    alert(this.series.get(0).type);
    this.series.get(0).type = chartType;
    }
    });

    thanks,

    Luca.

Thread Participants: 1