Results 1 to 3 of 3

Thread: Grouping with dynamic summary

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Location
    Lima, Peru
    Posts
    4

    Default Grouping with dynamic summary

    hi, well I'm new to this topic, and I wish to support the grid automatically text editing. the problem is that I'm trying to establish a connection between JS and SQL file, I have my connection string and a file data.php (where is the connection to the SQL table), I'm trying to display data dynamically but are charging me, but with static data (sample) operate normally.
    need your support in order to overcome this drawback.
    Thank you.
    PHP Code:
    /*! * Ext JS Library 3.4.0 * Copyright(c) 2006-2011 Sencha Inc. * [email protected] * http://www.sencha.com/license */Ext.onReady(function(){    Ext.QuickTips.init();    var xg Ext.grid;    var reader = new Ext.data.JsonReader({        idProperty'taskId',        fields: [            {name'projectId'type'int'},            {name'project'type'string'},            {name'taskId'type'int'},            {name'description'type'string'},            {name'estimate'type'float'},            {name'rate'type'float'},            {name'cost'type'float'},            {name'due'type'date'dateFormat:'m/d/Y'}        ]    });    // define a custom summary function    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){        return v + (record.data.estimate * record.data.rate);    };    // utilize custom extension for Group Summary    var summary = new Ext.ux.grid.GroupSummary();    var grid = new xg.EditorGridPanel({        ds: new Ext.data.GroupingStore({            reader: reader,            // use local data            data: app.grid.dummyData,            sortInfo: {field: 'due', direction: 'ASC'},            groupField: 'project'        }),        columns: [            {                id: 'description',                header: 'Task',                width: 80,                sortable: true,                dataIndex: 'description',                summaryType: 'count',                hideable: false,                summaryRenderer: function(v, params, data){                    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');                },                editor: new Ext.form.TextField({                   allowBlank: false                })            },{                header: 'Project',                width: 20,                sortable: true,                dataIndex: 'project'            },{                header: 'Due Date',                width: 25,                sortable: true,                dataIndex: 'due',                summaryType: 'max',                renderer: Ext.util.Format.dateRenderer('m/d/Y'),                editor: new Ext.form.DateField({                    format: 'm/d/Y'                })            },{                header: 'Estimate',                width: 20,                sortable: true,                dataIndex: 'estimate',                summaryType: 'sum',                renderer : function(v){                    return v +' hours';                },                editor: new Ext.form.NumberField({                   allowBlank: false,                   allowNegative: false,                   style: 'text-align:left'                })            },{                header: 'Rate',                width: 20,                sortable: true,                renderer: Ext.util.Format.usMoney,                dataIndex: 'rate',                summaryType: 'average',                editor: new Ext.form.NumberField({                    allowBlank: false,                    allowNegative: false,                    style: 'text-align:left'                })            },{                id: 'cost',                header: 'Cost',                width: 20,                sortable: false,                groupable: false,                renderer: function(v, params, record){                    return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);                },                dataIndex: 'cost',                summaryType: 'totalCost',                summaryRenderer: Ext.util.Format.usMoney            }        ],        view: new Ext.grid.GroupingView({            forceFit: true,            showGroupName: false,            enableNoGroups: false,            enableGroupingMenu: false,            hideGroupedColumn: true        }),        plugins: summary,        tbar : [{            text: 'Toggle',            tooltip: 'Toggle the visibility of summary row',            handler: function(){summary.toggleSummaries();}        }],        frame: true,        width: 800,        height: 450,        clicksToEdit: 1,        collapsible: true,        animCollapse: false,        trackMouseOver: false,        //enableColumnMove: false,        title: 'Sponsored Projects',        iconCls: 'icon-grid',        renderTo: document.body    });});// set up namespace for applicationExt.ns('app.grid');// store dummy data in the app namespaceapp.grid.dummyData = [    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}]; 

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    I cannot read your code. Can you make it legible?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    Lima, Peru
    Posts
    4

    Default

    sure, I share the code .... thanks again for supporting
    PHP Code:
    /*!
     *[email protected]
     */
    Ext.onReady(function(){


        
    Ext.QuickTips.init();


        var 
    xg Ext.grid;


        var 
    reader = new Ext.data.JsonReader({
            
    idProperty'taskid',
            
    fields: [
                {
    name'projectid'type'int'},
                {
    name'project'type'string'},
                {
    name'taskid'type'int'},
                {
    name'description'type'string'},
                {
    name'estimate'type'float'},
                {
    name'rate'type'float'},
                {
    name'cost'type'float'}
                
    //{name: 'due', type: 'date', dateFormat:'m/d/Y'}
                //{name: 'x', type: 'date', dateFormat:'m/d/Y'}
            
    ],
            
    // configuracin adicional para el control remoto
            
    root:'data',
            
    remoteGroup:true,
            
    remoteSorttrue


        
    });


        
    // definir una funcin de resumen personalizado
        
    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(vrecordfield){
            return 
    + (record.data.estimate record.data.rate);
        };


        
    // utilizar extensin personalizada para Resumen del grupo
        
    var summary = new Ext.ux.grid.GroupSummary();


        var 
    grid = new xg.EditorGridPanel({
            
    ds: new Ext.data.GroupingStore({
                
    readerreader,
                
    // utilizar los datos remotos
                
    proxy : new Ext.data.HttpProxy({
                    
    url'totals-hybrid2.json',
                    
    //url: 'data.php',
                    
    method'GET'
                
    }),
                
    //sortInfo: {field: 'due', direction: 'ASC'},
                
    groupField'project'
            
    }),
            
    columns: [
                {
                    
    id'description',
                    
    header'Tareas',
                    
    width80,
                    
    sortabletrue,
                    
    dataIndex'description',
                    
    summaryType'count',
                    
    hideablefalse,
                    
    summaryRenderer: function(vparamsdata){
                        return ((
    === || 1) ? '(' +' Tareas)' '(1 Tareas)');
                    },
                    
    editor: new Ext.form.TextField({
                       
    allowBlankfalse
                    
    })
                },{
                    
    header'Proyecto',
                    
    width20,
                    
    sortabletrue,
                    
    dataIndex'project'
                
    }/*,{
                    header: 'Fecha Produccion',
                    width: 25,
                    sortable: true,
                    dataIndex: 'x',
                    summaryType: 'max',
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    editor: new Ext.form.DateField({
                        format: 'm/d/Y'
                    })
                },{
                    header: 'Fecha Vencimiento',
                    width: 25,
                    sortable: true,
                    dataIndex: 'due',
                    summaryType: 'max',
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    editor: new Ext.form.DateField({
                        format: 'm/d/Y'
                    })
                }*/
    ,{
                    
    header'Duracion',
                    
    width20,
                    
    sortabletrue,
                    
    dataIndex'estimate',
                    
    summaryType'sum',
                    
    renderer : function(v){
                        return 
    +' horas';
                    },
                    
    editor: new Ext.form.NumberField({
                       
    allowBlankfalse,
                       
    allowNegativefalse,
                       
    style'text-align:left'
                    
    })
                },{
                    
    header'Valor',
                    
    width20,
                    
    sortabletrue,
                    
    rendererExt.util.Format.usMoney,
                    
    dataIndex'rate',
                    
    summaryType'average',
                    
    editor: new Ext.form.NumberField({
                        
    allowBlankfalse,
                        
    allowNegativefalse,
                        
    style'text-align:left'
                    
    })
                },{
                    
    id'Cost',
                    
    header'Total',
                    
    width20,
                    
    sortablefalse,
                    
    groupablefalse,
                    
    renderer: function(vparamsrecord){
                        return 
    Ext.util.Format.usMoney(record.data.estimate record.data.rate);
                    },
                    
    dataIndex'cost',
                    
    summaryType'totalCost',
                    
    summaryRendererExt.util.Format.usMoney
                
    }
            ],


            
    view: new Ext.grid.GroupingView({
                
    forceFittrue,
                
    showGroupNamefalse,
                
    enableNoGroupsfalse,
                
    enableGroupingMenufalse,
                
    hideGroupedColumntrue
            
    }),


            
    pluginssummary,


            
    tbar : ['-',{
                
    text'Resumen',
                
    tooltip'Muestra el Resumen',
                
    iconCls'',
                
    handler: function(){summary.toggleSummaries();}
            },
    '-',{
                
    text'Guardar',
                
    tooltip'Guarda las Modificaciones Realizadas',
                
    iconCls'',
                
    handler: function(){Save.SaveSummaries();}
            },
    '-'],


            
    frametrue,
            
    width800,
            
    height450,
            
    clicksToEdit1,
            
    collapsibletrue,
            
    animCollapsefalse,
            
    trackMouseOverfalse,
            
    //enableColumnMove: false,
            
    title'::Agal::',
            
    iconCls'icon-grid',
            
    renderTodocument.body
        
    });


        
    // cargar los datos remotos
        
    grid.store.load();


    }); 

Posting Permissions

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