1. #31
    Sencha User
    Join Date
    Nov 2012
    Posts
    22
    Vote Rating
    0
    deving is on a distinguished road

      0  

    Default Using combobox with different items per row

    Using combobox with different items per row


    I really like this component. I am able to get the combobox working in a grid column. However, what I need is to have the options in the combobox be different for each row. Is this possible? I currently have json data for the rows with nested data for the options. Can this be done and how? Thank you!

    Edit: I have now got this working...so my new issue is handling a select event in the combo box...seems to be firing the grid select event instead?

  2. #32
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    8
    Vote Rating
    0
    smartbinary is on a distinguished road

      0  

    Default


    trying to work with 4.2.0 and running into problems - even after applying the patch:

    Quote Originally Posted by Lukappa View Post
    ...
    after updating my ExtJs from 4.1.3 to 4.2.0 beta 2 the componentcolumn stopped to work (without errors/warnings).
    ...
    I fixed this problem changing
    Code:
    if (src.$owner && src.$owner.xtype == 'headercontainer') { ...
    with
    Code:
    if (src.$owner) { ...
    ....
    anyone got this component upgraded for use in 4.2.0? or...is there even a better solution than this component built into 4.2.0?

  3. #33
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    8
    Vote Rating
    0
    smartbinary is on a distinguished road

      0  

    Default


    Quote Originally Posted by smartbinary View Post
    trying to work with 4.2.0 and running into problems - even after applying the patch:
    here's the fix - resolves issue w/4.2.0 - add

    Code:
    cmp.setupProtoEl();
    just before the line

    Code:
    cmp.render(elm.parent(), elm);

  4. #34
    Sencha User
    Join Date
    Mar 2011
    Posts
    7
    Vote Rating
    0
    sai571 is on a distinguished road

      0  

    Default


    This is not working out of the box w/ Ext JS 4.2 version, please give the source code which works without patches/hacks.

  5. #35
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    46
    Vote Rating
    1
    fshort is on a distinguished road

      0  

    Wink Destroying children components

    Destroying children components


    Using v2.3 with extjs 4.2.1. When I refresh the grid store, looks like the children of the itscomponent column are not being destroyed. If I keep refreshing the grid, I see the children objects continue to accumulate in the DOM. Has anyone experienced this before? Code looks like this:
    Code:
    {
                    xtype: 'itscomponentcolumn',
                    text: 'Trend',
                    flex: 2,
                    align: 'center',
                    name : 'hits',
                    menuDisabled: true,
                    dataIndex: 'hits',
                    items: function(value, rec, idx, y, st, view) {
                        var storeId = rec.get("collectionName") + ":" + rec.get("metaproj") + ":" + rec.get("proj") + ":" + rec.get("entity");
                        return {
                            xtype: 'chart',
                            id: storeId,
                            border: false,
                            animate: false,
                            margin: 5,
                            height: 40,
                            width: 300,
                            label: {
                                position: 'right',
                                display: 'text',
                                labelText: st.getAt(idx).get("totalHits")
                            },
                            store: Ext.create('Ext.data.JsonStore', {
                                storeId: storeId,
                                model: 'mymodel',
                               data: value  
                            }),
                            shadow: false,
                            axes: [{
                                type: 'Numeric',
                                dashSize: 1,
                                position: 'left',
                                fields: ['ct']
                            }, {
                                type: 'Category',
                                dashSize: 1,
                                position: 'bottom',
                                fields: ['hm']
                            }],
                            series: [{
                                type: 'line',
                                showMarkers: false,
                                axis: 'left',
                                xField: 'hm',
                                yField: 'ct'                            
                            }]
                        };
                    }
                }]

  6. #36
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    324
    Vote Rating
    9
    Scorpie will become famous soon enough

      0  

    Default


    Quote Originally Posted by sai571 View Post
    This is not working out of the box w/ Ext JS 4.2 version, please give the source code which works without patches/hacks.
    You could do it yourself.
    I`m from Holland!

  7. #37
    Sencha User
    Join Date
    Jul 2012
    Posts
    26
    Vote Rating
    -1
    ananthk is an unknown quantity at this point

      0  

    Default This is very interesting. How do I display the nested JSON data in the stacked column

    This is very interesting. How do I display the nested JSON data in the stacked column


    Can someone please help me quckly to enable me display the nested JSON chart data in this code. When the store loads it does have the nested JSON data and I have provide the firebug snapshot. I am not sure what am I doing wrong to enable the chart work. I really appreciate your help quickly. I can't access the data as a single field in the grid as well


    Ext.require([
    'Ext.picker.*',
    'Ext.form.*',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.panel.*',
    'Ext.chart.*',
    'Its.grid.column.Component'
    ]);




    Ext.define('Org.model.MetricsModel', {
    extend: 'Ext.data.Model',
    config: {
    fields: [
    {
    name: 'orgname',
    type: 'string'
    },
    {
    name: 'successcount',
    type:'int'
    },
    {
    name: 'errorcode1',
    type:'int'
    },
    {
    name: 'errorcode2',
    type:'int'
    },
    {
    name: 'errorcode3',
    type:'int'
    },
    { name: 'time', type: 'string', mapping: 'chartdata.timeinterval' },
    { name: 'error', type: 'string', mapping: 'chartdata.errorcount' },
    { name: 'success', type: 'string', mapping: 'chartdata.successcount' }


    ],
    hasMany: [
    {
    model: 'Org.model.ChartModel',
    autoLoad: true,
    name: 'chartdata'
    }

    ]
    }
    });
    Ext.define('Org.model.ChartModel', {
    extend : 'Ext.data.Model',
    config : {
    idProperty : 'timeinterval',
    fields : [
    'timeinterval',
    'errorcount',
    'successcount'
    ],
    belongsTo: 'Org.model.MetricsModel'
    }
    });


    Ext.onReady(function() {


    var store = new Ext.data.Store({
    autoLoad : true,
    model : 'Org.model.MetricsModel',
    proxy : {
    type : 'ajax',
    url : 'data/json.json',
    reader : 'json'
    },
    listeners : {
    load : function(store) {
    var rec = store.getAt(5),
    chartdata = rec.chartdata();


    console.log('There are ' + chartdata.getCount() + ' chardata');
    //console.log('There is ' + jobDates.getCount() + ' job date');
    }
    },

    data: [
    {
    "orgname": "MYORG1",
    "successcount": 2,
    "errorcode1": 2,
    "errorcode2": 2,
    "errorcode3": 2,

    "chartdata": [
    {
    "timeinterval": "2-3", "successcount": 5,"errorcount": 6
    },
    {
    "timeinterval": "3-4","successcount": 6, "errorcount": 7
    },
    {
    "timeinterval": "5-6", "successcount": 8, "errorcount": 9
    },
    {
    "timeinterval": "7-8", "successcount": 9, "errorcount": 10
    },

    ]

    },
    {
    "orgname": "MYORG3",
    "successcount": 2,
    "errorcode1": 2,
    "errorcode2": 2,
    "errorcode3": 2,

    "chartdata": [
    {
    "timeinterval": "2-3", "successcount": 5, "errorcount": 6
    },
    {
    "timeinterval": "3-4", "successcount": 6,"errorcount": 7
    },

    {
    "timeinterval": "5-6", "successcount": 8, "errorcount": 9
    },
    {
    "timeinterval": "7-8", "successcount": 9, "errorcount": 10
    },

    ]

    }
    ]

    });




    Ext.define('Ext.chart.theme.myTheme', {
    extend: 'Ext.chart.theme.Base',
    constructor: function(config) {
    this.callParent([Ext.apply({
    colors: ['#800000','#009900']
    }, config)]);
    }
    });



    Ext.create('Ext.grid.Panel', {
    title: 'SIPR Ingest',
    name : 'task',
    store: store,
    width: 1900,
    height: 950,
    renderTo: Ext.getBody(),
    columns: [{
    text: 'ORGNAME',
    width: 150,
    dataIndex: 'orgname'
    },{ // chart column
    xtype: 'itscomponentcolumn',
    text : 'Chart',
    width: 200,
    // dataIndex: 'done',
    dataIndex: 'time',

    // HOW do I pass the Nested object here?
    items: function(value1, value2, value3) {
    return {


    xtype: 'chart',
    width: 200,
    height: 150,
    style: 'background:#fff',


    store: Ext.create('Ext.data.Store', {
    storeId:'ingestStore',
    fields:['timeinterval', 'errors', 'success'],
    data : [{timeinterval: value1}, {errors: value2}, {success: value3} ] // This need ot be changed based on how we can access the nested chartdata
    }),
    id: 'Barchart',
    theme: 'myTheme',
    animate: true,
    shadow: true,
    // store: store,
    background: {
    fill: '#3333FF'
    },

    axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['errors', 'success'],
    title: false,
    grid: true,
    hidden: true
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['timeinterval'],
    hidden: true

    }],
    series: [{

    type: 'column',
    axis: 'left',
    gutter: 0,

    style: {
    width: 10
    //<-- Specify you Column width here
    },
    xField: 'title',
    yField: ['errors', 'success'],
    stacked: true,


    tips: {
    trackMouse: true,
    renderer: function(storeItem, item, sprite, record, attr, index, store) {
    this.setWidth(100);
    this.setHeight(50);
    var label = item.value[1] == storeItem.data.errors ? 'errors' : 'success';
    this.setTitle(label + '<br />' + item.value[1]);

    }
    }
    }
    ]

    }
    }
    }


    ,{
    text : 'Success Count',
    width: 160,
    dataIndex: 'successcount'


    },{
    text : 'Error Code 1',
    width: 160,
    dataIndex: 'errorcode1'

    },
    {
    text : 'Error Code2',
    dataIndex: 'errorcode2',
    width: 200

    },

    {
    text : 'Error Code3',
    dataIndex: 'errorcode3',
    width: 200

    },

    {
    text : 'Timeinterval',
    dataIndex: 'chartdata.time',// I tried accessing the data even in a grid column it does not work
    width: 200

    }


    ]
    });
    });


    When the store loads , it has the following structure
    data
    [Object { orgname="USMC", successcount=2, errorcode1=2, more...}, Object { orgname="ARMY", successcount=2, errorcode1=2, more...}]
    0
    Object { orgname="MYORG1", successcount=2, errorcode1=2, more...}
    chartdata
    [Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]
    0
    Object { timeinterval="2-3", successcount=5, errorcount=6}
    errorcount
    6
    successcount
    5
    timeinterval
    "2-3"
    1
    Object { timeinterval="3-4", successcount=6, errorcount=7}
    errorcount
    7
    successcount
    6
    timeinterval
    "3-4"
    2
    Object { timeinterval="5-6", successcount=8, errorcount=9}
    errorcount
    9
    successcount
    8
    timeinterval
    "5-6"
    3
    Object { timeinterval="7-8", successcount=9, errorcount=10}
    errorcount
    10
    successcount
    9
    timeinterval
    "7-8"
    errorcode1
    2
    errorcode2
    2
    errorcode3
    2
    orgname
    "USMC"
    successcount
    2
    1
    Object { orgname="MYORG2", successcount=2, errorcode1=2, more...}
    chartdata
    [Object { timeinterval="2-3", successcount=5, errorcount=6}, Object { timeinterval="3-4", successcount=6, errorcount=7}, Object { timeinterval="5-6", successcount=8, errorcount=9}, Object { timeinterval="7-8", successcount=9, errorcount=10}]
    errorcode1
    2
    errorcode2
    2
    errorcode3
    2
    orgname
    "MYORG2"
    successcount
    2