1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    12
    Vote Rating
    0
    intel1981 is on a distinguished road

      0  

    Default Grid con paginaci

    Grid con paginaci


    Despues de varios dias de estar aprendiendo a usar ExtJS he logrado terminar mi primer grid usando el lenguaje PHP, base de datos con MySQL y la libreria JSON y quisiera compartirlo con esta comunidad.

    Espero que este peque
    Attached Images
    Attached Files
    Last edited by mystix; 21 May 2008 at 6:51 PM. Reason: use [code][/code] tags!

  2. #2
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    203
    Vote Rating
    0
    garraS is on a distinguished road

      0  

    Default


    Gracias por tu Tutorial en Espa

  3. #3
    Ext User
    Join Date
    Jan 2008
    Location
    Barcelona
    Posts
    58
    Vote Rating
    0
    sinma is on a distinguished road

      0  

    Thumbs up


    Gracias a ambos por la informaci

  4. #4
    Ext User
    Join Date
    Mar 2008
    Posts
    2
    Vote Rating
    0
    wipindon is on a distinguished road

      0  

    Default No se muestran los datos

    No se muestran los datos


    Hola he bajado los archivos de ejemplo y no se muestran los datos.

    Se muestra el grid mas no los datos

  5. #5
    Ext User titus_red's Avatar
    Join Date
    Feb 2008
    Posts
    1
    Vote Rating
    0
    titus_red is on a distinguished road

      0  

    Default


    Hola.
    Seguramente es porque no has cambiado los parametros para conectar a la base de datos estos estan en:
    direccion_del_tutorial/grid_php.php

  6. #6
    Ext User
    Join Date
    May 2008
    Posts
    1
    Vote Rating
    0
    dmc93639 is on a distinguished road

      0  

    Default


    muy util, muchisimas gracias

  7. #7
    Ext User
    Join Date
    May 2008
    Posts
    1
    Vote Rating
    0
    yashimitsu is on a distinguished road

      0  

    Default ayuda

    ayuda


    hola soy nuevo en esto de ExtJS y estoy modificando el ejemplo del Desktop que maneja EXT ya logre hacer un nuevo form ahi pero ahora quiero crear una ventana que tenga una tabla que jale los datos de una base de datos y agarre tu ejemplo que por cierto es muy bueno, el chiste es que me sale el error "missing } after property list" y es en la funcion load de la paginacion, creo que es por que tu defines: "var store = new Ext.data.JsonStore({" y a mi eso me marca error pues esta dentro de un item o no se, el codigo que tengo es el siguiente:
    Code:
    MyDesktop = new Ext.app.App({
        init :function(){
            Ext.QuickTips.init();
        },
    
        getModules : function(){
            return [
                new MyDesktop.GridWindow(),
                new MyDesktop.GridWindow2(),
                new MyDesktop.TabWindow(),
                new MyDesktop.AccordionWindow(),
                new MyDesktop.BogusMenuModule(),
                new MyDesktop.BogusModule(),
                new MyDesktop.FormWindow()
            ];
        },
    
        // config for the start menu
        getStartConfig : function(){
            return {
                title: 'IVICOM',
                iconCls: 'user',
                toolItems: [{
                    text:'Settings',
                    iconCls:'settings',
                    scope:this
                },'-',{
                    text:'Logout',
                    iconCls:'logout',
                    scope:this
                }]
            };
        }
    });
    
    
    
    /*
     * Example windows
     */
    MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
        id:'grid-win',
        init : function(){
            this.launcher = {
                text: 'Grid Window',
                iconCls:'icon-grid',
                handler : this.createWindow,
                scope: this
            }
        },
    
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('grid-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'grid-win',
                    title:'Grid Window',
                    width:740,
                    height:480,
                    iconCls: 'icon-grid',
                    shim:false,
                    animCollapse:false,
                    constrainHeader:true,
    
                    layout: 'fit',
                    items:
                        new Ext.grid.GridPanel({
                            border:false,
                            ds: new Ext.data.Store({
                                reader: new Ext.data.ArrayReader({}, [
                                   {name: 'company'},
                                   {name: 'price', type: 'float'},
                                   {name: 'change', type: 'float'},
                                   {name: 'pctChange', type: 'float'}
                                ]),
                                data: Ext.grid.dummyData
                            }),
                            cm: new Ext.grid.ColumnModel([
                                new Ext.grid.RowNumberer(),
                                {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
                                {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                                {header: "Change", width: 70, sortable: true, dataIndex: 'change'},
                                {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
                            ]),
    
                            viewConfig: {
                                forceFit:true
                            },
                            //autoExpandColumn:'company',
    
                            tbar:[{
                                text:'Add Something',
                                tooltip:'Add a new row',
                                iconCls:'add',
                            }, '-', {
                                text:'Options',
                                tooltip:'Blah blah blah blaht',
                                iconCls:'option'
                            },'-',{
                                text:'Remove Something',
                                tooltip:'Remove the selected item',
                                iconCls:'remove'
                            }]
                        })
                });
            }
            win.show();
        }
    });
    
    
    
    MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
        id:'tab-win',
        init : function(){
            this.launcher = {
                text: 'Tab Window',
                iconCls:'tabs',
                handler : this.createWindow,
                scope: this
            }
        },
    
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('tab-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'tab-win',
                    title:'Tab Window',
                    width:740,
                    height:480,
                    iconCls: 'tabs',
                    shim:false,
                    animCollapse:false,
                    border:false,
                    constrainHeader:true,
    
                    layout: 'fit',
                    items:
                        new Ext.TabPanel({
                            activeTab:0,
    
                            items: [{
                                title: 'Tab Text 1',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            },{
                                title: 'Tab Text 2',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            },{
                                title: 'Tab Text 3',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            },{
                                title: 'Tab Text 4',
                                header:false,
                                html : '<p>Something useful would be in here.</p>',
                                border:false
                            }]
                        })
                });
            }
            win.show();
        }
    });
    
    
    
    MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {
        id:'acc-win',
        init : function(){
            this.launcher = {
                text: 'Accordion Window',
                iconCls:'accordion',
                handler : this.createWindow,
                scope: this
            }
        },
    
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('acc-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'acc-win',
                    title: 'Accordion Window',
                    width:250,
                    height:400,
                    iconCls: 'accordion',
                    shim:false,
                    animCollapse:false,
                    constrainHeader:true,
    
                    tbar:[{
                        tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},
                        iconCls:'connect'
                    },'-',{
                        tooltip:'Add a new user',
                        iconCls:'user-add'
                    },' ',{
                        tooltip:'Remove the selected user',
                        iconCls:'user-delete'
                    }],
    
                    layout:'accordion',
                    border:false,
                    layoutConfig: {
                        animate:false
                    },
    
                    items: [
                        new Ext.tree.TreePanel({
                            id:'im-tree',
                            title: 'Online Users',
                            loader: new Ext.tree.TreeLoader(),
                            rootVisible:false,
                            lines:false,
                            autoScroll:true,
                            tools:[{
                                id:'refresh',
                                on:{
                                    click: function(){
                                        var tree = Ext.getCmp('im-tree');
                                        tree.body.mask('Loading', 'x-mask-loading');
                                        tree.root.reload();
                                        tree.root.collapse(true, false);
                                        setTimeout(function(){ // mimic a server call
                                            tree.body.unmask();
                                            tree.root.expand(true, true);
                                        }, 1000);
                                    }
                                }
                            }],
                            root: new Ext.tree.AsyncTreeNode({
                                text:'Online',
                                children:[{
                                    text:'Friends',
                                    expanded:true,
                                    children:[{
                                        text:'Jack',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Brian',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Jon',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Tim',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Nige',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Fred',
                                        iconCls:'user',
                                        leaf:true
                                    },{
                                        text:'Bob',
                                        iconCls:'user',
                                        leaf:true
                                    }]
                                },{
                                    text:'Family',
                                    expanded:true,
                                    children:[{
                                        text:'Kelly',
                                        iconCls:'user-girl',
                                        leaf:true
                                    },{
                                        text:'Sara',
                                        iconCls:'user-girl',
                                        leaf:true
                                    },{
                                        text:'Zack',
                                        iconCls:'user-kid',
                                        leaf:true
                                    },{
                                        text:'John',
                                        iconCls:'user-kid',
                                        leaf:true
                                    }]
                                }]
                            })
                        }), {
                            title: 'Settings',
                            html:'<p>Something useful would be in here.</p>',
                            autoScroll:true
                        },{
                            title: 'Even More Stuff',
                            html : '<p>Something useful would be in here.</p>'
                        },{
                            title: 'My Stuff',
                            html : '<p>Something useful would be in here.</p>'
                        }
                    ]
                });
            }
            win.show();
        }
    });
    
    // for example purposes
    var windowIndex = 0;
    
    MyDesktop.BogusModule = Ext.extend(Ext.app.Module, {
        init : function(){
            this.launcher = {
                text: 'Form Window '+(++windowIndex),
                iconCls:'bogus',
                handler : this.createWindow,
                scope: this,
                windowId:windowIndex
            }
        },
    
        createWindow : function(src){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('bogus'+src.windowId);
            if(!win){
                win = desktop.createWindow({
                    id: 'bogus'+src.windowId,
                    title:src.text,
                    width:640,
                    height:480,
                    html : '<p>Something useful would be in here.</p>',
                    iconCls: 'bogus',
                    shim:false,
                    animCollapse:false,
                    constrainHeader:true
                });
            }
            win.show();
        }
    });
    
    
    MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, {
        init : function(){
            this.launcher = {
                text: 'Bogus Submenu',
                iconCls: 'bogus',
                handler: function() {
                    return false;
                },
                menu: {
                    items:[{
                        text: 'Form Bogus Window '+(++windowIndex),
                        iconCls:'bogus',
                        handler : this.createWindow,
                        scope: this,
                        windowId: windowIndex
                        },{
                        text: 'Bogus Window '+(++windowIndex),
                        iconCls:'bogus',
                        handler : this.createWindow,
                        scope: this,
                        windowId: windowIndex
                        },{
                        text: 'Bogus Window '+(++windowIndex),
                        iconCls:'bogus',
                        handler : this.createWindow,
                        scope: this,
                        windowId: windowIndex
                        },{
                        text: 'Bogus Window '+(++windowIndex),
                        iconCls:'bogus',
                        handler : this.createWindow,
                        scope: this,
                        windowId: windowIndex
                        },{
                        text: 'Bogus Window '+(++windowIndex),
                        iconCls:'bogus',
                        handler : this.createWindow,
                        scope: this,
                        windowId: windowIndex
                    }]
                }
            }
        }
    });
    
    
    MyDesktop.FormWindow = Ext.extend(Ext.app.Module, {
        id:'form-win',
        init : function(){
            this.launcher = {
                text: 'Form Window',
                iconCls:'bogus',
                handler : this.createWindow,
                scope: this
            }
        },
    
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('form-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'form-win',
                    title:'Form Window',
                    width:740,
                    height:480,
                    iconCls: 'bogus',
                    shim:false,
                    animCollapse:false,
                    border:false,
                    constrainHeader:true,
    
                    layout: 'fit',
                    items:
                        new Ext.FormPanel({
                            labelWidth: 75, // label settings here cascade unless overridden
                            url:'save-form.php',
                            frame:true,
                            bodyStyle:'padding:5px 5px 0',
                            
                            items: [{
                                       layout:'column',
                                    items:[{
                                        columnWidth:.5,
                                        layout: 'form',
                                        items: [{
                                                xtype:'textfield',
                                                fieldLabel: 'First Name',
                                                name: 'first',
                                                anchor:'95%'
                                            }, {
                                                xtype:'textfield',
                                                fieldLabel: 'Company',
                                                name: 'company',
                                                anchor:'95%'
                                        }]
                                    },{
                                        columnWidth:.5,
                                        layout: 'form',
                                        items: [{
                                                xtype:'textfield',
                                                fieldLabel: 'Last Name',
                                                name: 'last',
                                                anchor:'95%'
                                            },{
                                                xtype:'textfield',
                                                fieldLabel: 'Email',
                                                name: 'email',
                                                vtype:'email',
                                                anchor:'95%'
                                            }]
                                    }]
                            }],
                            buttons: [{
                                        text: 'Save'
                                       },{
                                        text: 'Cancel'
                            }]
                        })                
                        
                    })
           }
            win.show();
        }
    });
    
    // Array data for the grid
    Ext.grid.dummyData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
        ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
    ];
    
    //Grid con php y mysql
    
    MyDesktop.GridWindow2 = Ext.extend(Ext.app.Module, {
        id:'grid-win',
        init : function(){
            this.launcher = {
                text: 'VIPS en Casa',
                iconCls:'icon-grid',
                handler : this.createWindow,
                scope: this
            }
        },
    
        createWindow : function(){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow('vips-win');
            if(!win){
                win = desktop.createWindow({
                    id: 'vips-win',
                    title:'VIPS en Casa',
                    width:740,
                    height:480,
                    iconCls: 'icon-grid',
                    shim:false,
                    animCollapse:false,
                    constrainHeader:true,
    
                    layout: 'fit',
                    items:
                        new Ext.data.JsonStore({
                                url: 'grid_php.php',     
                                root: 'datos',
                                totalProperty: 'total',
                                fields: [{name:'id'},
                                         {name:'nombre'},
                                         {name:'pax'},
                                         {name:'llegada'},
                                         {name:'inicio'},
                                         {name:'termino'},
                                         {name:'salida'},
                                         {name:'staff'},
                                         {name:'staffop'},
                                         {name:'hotel'},
                                         {name:'agencia'},
                                         {name:'status'}]
                            })
                        load({
                            params: { 
                                start: 0, 
                                limit: 10
                            }           
                          })
        
        
                        new Ext.grid.GridPanel({
                                            store: store,
                                            columns: [
                                                        {header: "# Registro", width: 25, sortable: true, dataIndex: 'id'},
                                                        {header: "Nombre", width: 100, sortable: true, dataIndex: 'nombre'},
                                                        {header: "Pax", width: 15, sortable: true, dataIndex: 'pax'},
                                                        {header: "Llegada", width: 30, sortable: true, dataIndex: 'llegada'},
                                                        {header: "Inicio", width: 30, sortable: true, dataIndex: 'inicio'},
                                                        {header: "Termino", width: 30, sortable: true, dataIndex: 'termino'},
                                                        {header: "Salida", width: 30, sortable: true, dataIndex: 'salida'},
                                                        {header: "Staff", width: 50, sortable: true, dataIndex: 'staff'}
                                                        {header: "Staff Oper", width: 50, sortable: true, dataIndex: 'staffop'},
                                                        {header: "Hotel", width: 60, sortable: true, dataIndex: 'hotel'}
                                                        {header: "Agencia", width: 150, sortable: true, dataIndex: 'agencia'}
                                                        {header: "Status", width: 10, sortable: true, dataIndex: 'status'}
            
                                            ],
                                            viewConfig: {
                                                    forceFit: true
                                            },
                                            sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
                                            bbar: new Ext.PagingToolbar({
                                                                pageSize: 10,
                                                                store: store,
                                                                displayInfo: true
                                            }),
                                            width:600,
                                            height:300,
                                            frame:true
                        })
        
                        //grid.render('grid-example');
        
        /*var win = new Ext.Window({
            title: 'Datos de muestra',
            closable:true,
            width:615,
            height:342,
            border:false,
            plain:true,            
            region:'center',
            items: grid
            })            */
                                                            
                });
            }
            win.show();
        }
    });
    la parte que esta en rojo es tu codigo medio modificado por mi. Ayuda please ya no se que hacer.
    Last edited by mystix; 21 May 2008 at 6:55 PM. Reason: use [code][/code] tags

  8. #8
    Ext User
    Join Date
    Jun 2008
    Posts
    1
    Vote Rating
    0
    amcv76 is on a distinguished road

      0  

    Default


    Hola .. sabes estoy bajando el archivo adjunto pero me arroja un error podrias volver a subirlo?.. por fa soy nuevo y la verdad que estoy bajando una serie de ejemplo para asi ver en la practica como funciona...

    Gracias


    Alejandro

  9. #9
    Ext User
    Join Date
    May 2008
    Posts
    71
    Vote Rating
    0
    Efex is on a distinguished road

      0  

    Default


    hola,

    Segun veo en este tutorial, se pasan al hacer load, parametros de inicio y final.

    C

  10. #10
    Ext User
    Join Date
    Aug 2008
    Posts
    2
    Vote Rating
    0
    crisal is on a distinguished road

      0  

    Default


    Exelente ... is magnifico ejemplo !!!