add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / grid / remotegroupgrid.js

Ext.require([\r
    'Ext.ux.ajax.JsonSimlet',\r
    'Ext.ux.ajax.SimManager',\r
    'Ext.data.*',\r
    'Ext.grid.*'\r
]);\r
Ext.onReady(function() {\r
\r
    var data = [{\r
        "name": "Cheesecake Factory",\r
        "cuisine": "American"\r
    }, {\r
        "name": "Creamery",\r
        "cuisine": "American"\r
    }, {\r
        "name": "Crepevine",\r
        "cuisine": "American"\r
    }, {\r
        "name": "Gordon Biersch",\r
        "cuisine": "American"\r
    }, {\r
        "name": "MacArthur Park",\r
        "cuisine": "American"\r
    }, {\r
        "name": "Old Pro",\r
        "cuisine": "American"\r
    }, {\r
        "name": "Shokolaat",\r
        "cuisine": "American"\r
    }, {\r
        "name": "Slider Bar",\r
        "cuisine": "American"\r
    }, {\r
        "name": "University Cafe",\r
        "cuisine": "American"\r
    }, {\r
        "name": "Madame Tam",\r
        "cuisine": "Asian"\r
    }, {\r
        "name": "House of Bagels",\r
        "cuisine": "Bagels"\r
    }, {\r
        "name": "Nola's",\r
        "cuisine": "Cajun"\r
    }, {\r
        "name": "St Michael's Alley",\r
        "cuisine": "Californian"\r
    }, {\r
        "name": "Coconuts Caribbean Restaurant & Bar",\r
        "cuisine": "Caribbean"\r
    }, {\r
        "name": "Mango Caribbean Cafe",\r
        "cuisine": "Caribbean"\r
    }, {\r
        "name": "Jing Jing",\r
        "cuisine": "Chinese"\r
    }, {\r
        "name": "Mandarin Gourmet",\r
        "cuisine": "Chinese"\r
    }, {\r
        "name": "Tai Pan",\r
        "cuisine": "Chinese"\r
    }, {\r
        "name": "Coupa Cafe",\r
        "cuisine": "Coffee"\r
    }, {\r
        "name": "Lytton Coffee Company",\r
        "cuisine": "Coffee"\r
    }, {\r
        "name": "Peet's Coffee",\r
        "cuisine": "Coffee"\r
    }, {\r
        "name": "Starbucks",\r
        "cuisine": "Coffee"\r
    }, {\r
        "name": "Rose & Crown",\r
        "cuisine": "English"\r
    }, {\r
        "name": "Bistro Maxine",\r
        "cuisine": "French"\r
    }, {\r
        "name": "Cafe Epi",\r
        "cuisine": "French"\r
    }, {\r
        "name": "Darbar Indian Cuisine",\r
        "cuisine": "Indian"\r
    }, {\r
        "name": "Hyderabad House",\r
        "cuisine": "Indian"\r
    }, {\r
        "name": "Janta",\r
        "cuisine": "Indian"\r
    }, {\r
        "name": "Junoon",\r
        "cuisine": "Indian"\r
    }, {\r
        "name": "Mantra",\r
        "cuisine": "Indian"\r
    }, {\r
        "name": "Buca di Beppo",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "Cafe Renzo",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "Cafe Renzo",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "Il Fornaio",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "La Strada",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "Osteria",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "Pasta?",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "Vero",\r
        "cuisine": "Italian"\r
    }, {\r
        "name": "Baklava",\r
        "cuisine": "Mediterranean"\r
    }, {\r
        "name": "Cafe 220",\r
        "cuisine": "Mediterranean"\r
    }, {\r
        "name": "Cafe Renaissance",\r
        "cuisine": "Mediterranean"\r
    }, {\r
        "name": "Evvia Estiatorio",\r
        "cuisine": "Mediterranean"\r
    }, {\r
        "name": "Gyros-Gyros",\r
        "cuisine": "Mediterranean"\r
    }, {\r
        "name": "Kan Zeman",\r
        "cuisine": "Mediterranean"\r
    }, {\r
        "name": "Lavanda",\r
        "cuisine": "Mediterranean"\r
    }, {\r
        "name": "Reposado",\r
        "cuisine": "Mexican"\r
    }, {\r
        "name": "Sancho's Taquira",\r
        "cuisine": "Mexican"\r
    }, {\r
        "name": "California Pizza Kitchen",\r
        "cuisine": "Pizza"\r
    }, {\r
        "name": "New York Pizza",\r
        "cuisine": "Pizza"\r
    }, {\r
        "name": "Patxi's Pizza",\r
        "cuisine": "Pizza"\r
    }, {\r
        "name": "Pizza My Heart",\r
        "cuisine": "Pizza"\r
    }, {\r
        "name": "Round Table",\r
        "cuisine": "Pizza"\r
    }, {\r
        "name": "Pluto's",\r
        "cuisine": "Salad"\r
    }, {\r
        "name": "Sprout Cafe",\r
        "cuisine": "Salad"\r
    }, {\r
        "name": "The Prolific Oven",\r
        "cuisine": "Sandwiches"\r
    }, {\r
        "name": "Kanpai",\r
        "cuisine": "Sushi"\r
    }, {\r
        "name": "Miyake",\r
        "cuisine": "Sushi"\r
    }, {\r
        "name": "Sushi Tomo",\r
        "cuisine": "Sushi"\r
    }, {\r
        "name": "Joya",\r
        "cuisine": "Tapas"\r
    }, {\r
        "name": "Bangkok Cuisine",\r
        "cuisine": "Thai"\r
    }, {\r
        "name": "Krung Siam",\r
        "cuisine": "Thai"\r
    }, {\r
        "name": "Siam Royal",\r
        "cuisine": "Thai"\r
    }, {\r
        "name": "Thaiphoon",\r
        "cuisine": "Thai"\r
    }, {\r
        "name": "Garden Fresh",\r
        "cuisine": "Vegan"\r
    }, {\r
        "name": "Loving Hut",\r
        "cuisine": "Vegan"\r
    }, {\r
        "name": "Tamarine",\r
        "cuisine": "Vietnamese"\r
    }, {\r
        "name": "Three Seasons",\r
        "cuisine": "Vietnamese"\r
    }];\r
\r
    // wrapped in closure to prevent global vars.\r
    Ext.define('Restaurant', {\r
        extend: 'Ext.data.Model',\r
        fields: ['name', 'cuisine']\r
    });\r
\r
    Ext.ux.ajax.SimManager.init({\r
        delay: 30,\r
        defaultSimlet: null\r
    }).register({\r
        'readRestaurants': {\r
            data: data,\r
            stype: 'json',\r
            getData: Ext.Function.createInterceptor(Ext.ux.ajax.JsonSimlet.prototype.getData, function() {\r
                delete this.currentOrder;\r
            }),\r
            \r
            // JsonSimlet respects limit param. We want to return ALL the data\r
            getPage: function(ctx, data) {\r
                return data;\r
            }\r
        }\r
    }).register({\r
        'createRestaurant': {\r
            stype: 'json',\r
            getData: function(ctx) {\r
                var recData = Ext.JSON.decode(ctx.xhr.body);\r
                delete recData.id;\r
                data.push(recData);\r
                return [recData]\r
            }\r
        }\r
    });\r
\r
    var restaurants = Ext.create('Ext.data.Store', {\r
        model: 'Restaurant',\r
        groupField: 'cuisine',\r
        remoteGroup: true,\r
        sorters: ['name'],\r
        proxy: {\r
            api: {\r
                create: 'createRestaurant',\r
                read: 'readRestaurants'\r
            },\r
            actionMethods: {\r
                create : 'GET',\r
                read   : 'GET'\r
            },\r
            noCache: false,\r
            type: 'ajax',\r
            reader: 'json',\r
            writer: 'json'\r
        },\r
        autoLoad: true,\r
        autoSync: true,\r
        listeners: {\r
            // Clear grouping button only valid if the store is grouped\r
            groupchange: function() {\r
                grid.down('[text=Clear Grouping]').setDisabled(!restaurants.isGrouped());\r
            },\r
\r
            // Upon successful add of a new restaurant, invoke the server to sort and group\r
            write: function(s, operation) {\r
                if (operation.action === 'create' && operation.success === true) {\r
                    restaurants.sort();\r
                }\r
            }\r
        }\r
    });\r
    \r
    var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{\r
        groupHeaderTpl: 'Cuisine: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',\r
        hideGroupedHeader: true\r
    });\r
\r
    var grid = Ext.create('Ext.grid.Panel', {\r
        renderTo: Ext.getBody(),\r
        collapsible: true,\r
        iconCls: 'icon-grid',\r
        frame: true,\r
        store: restaurants,\r
        width: 600,\r
        height: 400,\r
        title: 'Restaurants',\r
        resizable: true,\r
        features: [groupingFeature],\r
        columns: [{\r
            text: 'Name',\r
            flex: 1,\r
            dataIndex: 'name'\r
        },{\r
            text: 'Cuisine',\r
            flex: 1,\r
            dataIndex: 'cuisine'\r
        }],\r
        fbar  : [{\r
            text: 'New Restaurant',\r
            handler: function() {\r
                newRestaurantDialog.show();\r
            }\r
        },\r
            '->', {\r
            text:'Clear Grouping',\r
            iconCls: 'icon-clear-group',\r
            handler : function(b) {\r
                groupingFeature.disable();\r
            }\r
        }]\r
    });\r
    \r
    var newRestaurantDialog = Ext.create('Ext.window.Window', {\r
        closeAction: 'hide',\r
        title: 'Add a new restaurant',\r
\r
        // Make the Window out of a <form> el so that the <button type="submit"> will invoke its handler upon CR\r
        autoEl: 'form',\r
        width: 400,\r
        bodyPadding: 5,\r
        layout: 'anchor',\r
        defaults: {\r
            anchor: '100%'\r
        },\r
        defaultFocus: '[name=name]',\r
        items: [{\r
            xtype: 'textfield',\r
            fieldLabel: 'Name',\r
            name: 'name'\r
        }, {\r
            xtype: 'textfield',\r
            fieldLabel: 'Cuisine',\r
            name: 'cuisine'\r
        }],\r
        buttons: [{\r
            text: 'Add',\r
            type: 'submit',\r
            handler: function() {\r
                var newRec = new Restaurant({\r
                    name: newRestaurantDialog.down('[name=name]').getValue(), \r
                    cuisine: newRestaurantDialog.down('[name=cuisine]').getValue()\r
                });\r
                restaurants.add(newRec);\r
                newRestaurantDialog.hide();\r
                newRestaurantDialog.getEl().dom.reset();\r
            }\r
        }, {\r
            text: 'Cancel',\r
            handler: function() {\r
                newRestaurantDialog.hide();\r
            }\r
        }]\r
    });\r
});\r