Page 4 of 4 FirstFirst ... 234
Results 31 to 37 of 37

Thread: Its.grid.column.Component

  1. #31
    Sencha User
    Join Date
    Nov 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default 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
    Sencha User
    Join Date
    Apr 2010
    Posts
    8
    Vote Rating
    0
      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
    Sencha User
    Join Date
    Apr 2010
    Posts
    8
    Vote Rating
    0
      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
    8
    Vote Rating
    0
      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
    Sencha Premium User
    Join Date
    May 2007
    Posts
    46
    Vote Rating
    1
      0  

    Wink 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
    387
    Vote Rating
    49
      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
      0  

    Default 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

Page 4 of 4 FirstFirst ... 234

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •