[SOLUCIONADO] Conectar Json y SQL

[ambichol]

hola, tengo un problema, estoy usando la libreria ext-js sin embargo, no estan jalando los daos dinamicos que deseo que se muestren. le comparto el codigo:

Código Javascript:

/*!
 *Ag@l
 */
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'}
        ],
        // configuración adicional para el control remoto
        root:'data',
        remoteGroup:true,
        remoteSort: true
 
    });
 
    // definir una función de resumen personalizado
    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
        return v + (record.data.estimate * record.data.rate);
    };
 
    // utilizar extensión personalizada para Resumen del grupo
    var summary = new Ext.ux.grid.GroupSummary();
 
    var grid = new xg.EditorGridPanel({
        ds: new Ext.data.GroupingStore({
            reader: reader,
            // utilizar los datos remotos
            proxy : new Ext.data.HttpProxy({
                url: 'totals-hybrid.json',
                method: 'GET'
            }),
            //sortInfo: {field: 'due', direction: 'ASC'},
            groupField: 'project'
        }),
        columns: [
            {
                id: 'description',
                header: 'Tareas',
                width: 80,
                sortable: true,
                dataIndex: 'description',
                summaryType: 'count',
                hideable: false,
                summaryRenderer: function(v, params, data){
                    return ((v === 0 || v > 1) ? '(' + v +' Tareas)' : '(1 Tareas)');
                },
                editor: new Ext.form.TextField({
                   allowBlank: false
                })
            },{
                header: 'Proyecto',
                width: 20,
                sortable: true,
                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',
                width: 20,
                sortable: true,
                dataIndex: 'estimate',
                summaryType: 'sum',
                renderer : function(v){
                    return v +' horas';
                },
                editor: new Ext.form.NumberField({
                   allowBlank: false,
                   allowNegative: false,
                   style: 'text-align:left'
                })
            },{
                header: 'Valor',
                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: 'Total',
                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: 'Resumen',
            tooltip: 'Muestra el Resumen',
            iconCls: '',
            handler: function(){summary.toggleSummaries();}
        },'-',{
            text: 'Guardar',
            tooltip: 'Guarda las Modificaciones Realizadas',
            iconCls: '',
            handler: function(){summary.toggleSummaries();}
        }],
 
        frame: true,
        width: 800,
        height: 450,
        clicksToEdit: 1,
        collapsible: true,
        animCollapse: false,
        trackMouseOver: false,
        //enableColumnMove: false,
        title: '::Agal::',
        iconCls: 'icon-grid',
        renderTo: document.body
    });
 
    // cargar los datos remotos
    grid.store.load();
 
});
 

como se vera en la url de donde saca la info es un archivo json llamado totals-hybrid.json, el cual tiene esto en su interior:

Código Javascript:

{
    data: [
{projectId: 1, project: 'Filtro1', taskId: 101, description: 'Sub_filtro1', estimate: 6, rate: 150},
{projectId: 1, project: 'Filtro1', taskId: 102, description: 'Sub_filtro1', estimate: 4, rate: 150},
{projectId: 1, project: 'Filtro1', taskId: 103, description: 'Sub_filtro1', estimate: 4, rate: 150},
{projectId: 1, project: 'Filtro1', taskId: 104, description: 'Sub_filtro1', estimate: 8, rate: 0},
{projectId: 1, project: 'Filtro1', taskId: 105, description: 'Sub_filtro1', estimate: 8, rate: 125},
{projectId: 2, project: 'Filtro2', taskId: 106, description: 'Sub_filtro2', estimate: 6, rate: 100},
{projectId: 2, project: 'Filtro2', taskId: 107, description: 'Sub_filtro2', estimate: 6, rate: 100},
{projectId: 2, project: 'Filtro2', taskId: 108, description: 'Sub_filtro2', estimate: 4, rate: 100},
{projectId: 2, project: 'Filtro2', taskId: 109, description: 'Sub_filtro2', estimate: 2, rate: 100},
{projectId: 2, project: 'Filtro2', taskId: 110, description: 'Sub_filtro2', estimate: 6, rate: 100},
{projectId: 3, project: 'Filtro3', taskId: 111, description: 'Sub_filtro3', estimate: 4, rate: 125},
{projectId: 3, project: 'Filtro3', taskId: 112, description: 'Sub_filtro3', estimate: 4, rate: 125},
{projectId: 3, project: 'Filtro3', taskId: 113, description: 'Sub_filtro3', estimate: 6, rate: 125},
{projectId: 3, project: 'Filtro3', taskId: 114, description: 'Sub_filtro3', estimate: 4, rate: 125},
{projectId: 3, project: 'Filtro3', taskId: 115, description: 'Sub_filtro3', estimate: 4, rate: 125},
{projectId: 3, project: 'Filtro3', taskId: 116, description: 'Sub_filtro3', estimate: 10, rate: 125},
{projectId: 3, project: 'Filtro3', taskId: 117, description: 'Sub_filtro3', estimate: 8, rate: 125}
    ],
    
    summaryData: {
        'Filtro1': {description: 14, estimate: 9, rate: 99, due: new Date(2009, 6, 29), cost: 999}
    }
}
 

lo que deseo saber es como hacer para que el archivo json se conecte con SQL server y me muestre la tabla que deseo.

gracias

[maycolalvarez]

lo ideal es usar un script del lado del servidor que sirva como puente, conectando el HttpProxy a éste y el script devuelve a la salida el contenido en formato JSON.

como su caso es SQL server, recomiendo ASPX o ASP.NET (aunque no me guste, prefiero PHP o JSP) saludos.

[ambichol]

maycolalvarez, gracias por tu respuesta...no entiendo muy bien lo que me comentas, podrias explicarte un poco mejor...? y si me pudieses apoyar un poco con el codigo que esta descrito, realmente te lo agradeceria bastante.

[Carlangueitor]

El archivo json o javascript no se pueden conectar directo con tu servidor de bases de datos. Tienes que programar un script del lado del servidor para que haga la consulta a la base de datos y te lo devuelva como json.

Saludos

[ambichol]

gracias por su respuesta, pero como comentaba anteriormente, soy algo nuevo en este tema, y desearia que me pudisen orientar con este tema.....

[Carlangueitor]

Ok, más orientación.

¿Que lenguaje de programación del lado del servidor sabes usar?

Saludos

[ambichol]

bueno por el momento estoy usando PHP con SQL server.
los codigos que muestro arriba son de la libreria ext-3.4.0(ejemplos que estan disponibles para modificacion) y son los que estoy usando.
ese es mi problema, que el archivo .JS se conecte con la BD en SQL.

[Carlangueitor]

Repito, javascript no se puede conectar a SQL Server directamente.

Tienes que hacer un script en PHP que se conecte a la base de datos y te devuelva el resultado en JSON, algunos links de ayuda:

http://www.sencha.com/learn/ext-js-g...h-php-and-sql/
http://www.php.net/manual/es/function.json-encode.php
http://eosrei.net/articles/2011/12/b...stresponse-php

Saludos

[ambichol]

claro, entiendo, creo que no me expliqeu correctamente, realmente son 3 archivos, uno es mi cadena de conexion(cnx.php), otro es un archivo llamado data.php(en donde estan los datos de SQL que deseo mostrar) y el tercero es mi archivo .JS.

creo que con eso me explique mejor... o me equivoco...?

[Carlangueitor]

Entonces cambia la url del json a el archivo data.php.

Saludos

[ambichol]

ya realice el cambio, pero aun asi no muestra nada, cuando ejecuto el archivo data.php me muestran los datos que estan en el sql, pero al enlazarlo al data.php no muestra nada, a mi parecer el problema es en la codificacion que realize en mi archivo .JS, te comparto el codigo original para que me puedas ayudar. en donde se ve que hay datos estaticos y funciona normalmente.

Código Javascript:

/*!
 * 
 */
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 application
Ext.ns('app.grid');
// store dummy data in the app namespace
app.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'}
];
 

gracias.....

[Carlangueitor]

¿te da error la consola?

Saludos

[ambichol]

no, me muestra el contenedor que deberia salir(Grid) mas no los datos que llenan dicho contenedor, te envio la url original para que tengas una idea de lo que estoy tratando de hacer.
[URL="http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/totals.html"]http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/totals.html[/URL]

[Carlangueitor]

Lo más fácil es que subieras el ejemplo a un sitio, ya que es difícil saber en donde está el problema con tanto código.

Saludos

[ambichol]

Claro....el ejemplo original que estoy presentando problemas es el primero, en el cual el primer archivo es el .JS y el archivo 2 es el que tiene la extension .json

[ambichol]

por otro lado, el ejemplo que me comentas esta en la URL de la parte superior.....te lo dejo nuevamente..
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/totals.html
es eso el ejemplo que estoy tratando de enlazar el archivo .JS al puente(data.php) para que me jale los archivos de SQL