ExtJs 4.1网格渲染问题

我已将ExtJS复制粘贴到我的应用程序中。我已经贴好了 但在运行解决方案后，网格将呈现如下图所示的效果。我遗漏了任何参考资料吗？这是你的电话号码

Ext.require（['Ext.data.*'，'Ext.grid.*'）；
Ext.onReady（函数（）{
//封装在封闭中以防止全局变量。
外部定义（“餐厅”{
扩展：“Ext.data.Model”，
字段：[“名称”、“菜肴”]
});
var=Ext.create（'Ext.data.Store'{
storeId:“餐厅”，
模特：“餐厅”，
groupField：“美食”，
分拣员：[“菜肴”、“名称”]，
数据：[{
名称：“芝士蛋糕工厂”，
美食：“美国”
},{
名称：'大学咖啡馆'，
美食：“美国”
},{
名称：'滑块'，
美食：“美国”
},{
名称：“Shokolaat”，
美食：“美国”
},{
姓名：'Gordon Biersch'，
美食：“美国”
},{
名称：'Crepevine'，
美食：“美国”
},{
名称：'奶油'，
美食：“美国”
},{
姓名：'老专业'，
美食：“美国”
},{
姓名：“诺拉”，
美食：“卡津”
},{
名称：“百吉饼屋”，
美食：“百吉饼”
},{
名称：“多产烤箱”，
美食：“三明治”
},{
名称：“La Strada”，
美食：“意大利”
},{
名称：“Buca di Beppo”，
美食：“意大利”
},{
名字：“意大利面？”，
美食：“意大利”
},{
姓名:"谭夫人",，
美食：“亚洲”
},{
名称：'发芽咖啡'，
美食：“沙拉”
},{
名称：“冥王星”，
美食：“沙拉”
},{
名称：“朱农”，
美食：“印度”
},{
名称：'Bistro Maxine'，
美食：“法式”
},{
名称：“三季”，
美食：“越南”
},{
名称：“桑乔的塔奇拉”，
美食：“墨西哥”
},{
名称：“Reposado”，
美食：“墨西哥”
},{
名称：“暹罗皇家”，
美食：“泰国”
},{
姓名：“Krung Siam”，
美食：“泰国”
},{
名称：“Thaiphoon”，
美食：“泰国”
},{
名字：“塔玛琳”，
美食：“越南”
},{
姓名：“Joya”，
美食：“塔帕斯”
},{
名字:"晶晶",，
美食：“中国”
},{
名称：“Patxi’s Pizza”，
美食：“比萨饼”
},{
名称：“Evvia Estiatorio”，
美食：“地中海”
},{
名称:"咖啡220",，
美食：“地中海”
},{
名称:"复兴咖啡",，
美食：“地中海”
},{
姓名:"菅泽民",，
美食：“地中海”
},{
名称：“陀螺仪陀螺仪”，
美食：“地中海”
},{
名称：“芒果加勒比咖啡馆”，
美食：“加勒比”
},{
名称：“椰子加勒比餐厅及酒吧”，
美食：“加勒比”
},{
名称：‘玫瑰皇冠’，
美食：“英语”
},{
名称：“Baklava”，
美食：“地中海”
},{
名称：“国语美食”，
美食：“中国”
},{
名称：“曼谷美食”，
美食：“泰国”
},{
名称：“Darbar印度料理”，
美食：“印度”
},{
名字：'咒语'，
美食：“印度”
},{
姓名：“Janta”，
美食：“印度”
},{
名称：“海得拉巴之家”，
美食：“印度”
},{
名称：“星巴克”，
美食：“咖啡”
},{
名称：“皮特咖啡”，
美食：“咖啡”
},{
名称：'Coupa Cafe'，
美食：“咖啡”
},{
名称：“利顿咖啡公司”，
美食：“咖啡”
},{
姓名：“Il Fornaio”，
美食：“意大利”
},{
名称：“Lavanda”，
美食：“地中海”
},{
名称：“麦克阿瑟公园”，
美食：“美国”
},{
名称：“圣迈克尔巷”，
美食：“加州人”
},{
名称：“Osteria”，
美食：“意大利”
},{
名称：“Vero”，
美食：“意大利”
},{
名称：“伦佐咖啡”，
美食：“意大利”
},{
名称：“三宅一生”，
美食：“寿司”
},{
名称：“寿司汤”，
美食：“寿司”
},{
名称：'坎派'，
美食：“寿司”
},{
名字：“披萨我的心”，
美食：“比萨饼”
},{
名称：“纽约披萨”，
美食：“比萨饼”
},{
名称：“加州比萨厨房”，
美食：“比萨饼”
},{
名称：“圆桌会议”，
美食：“比萨饼”
},{
名字：'爱的小屋'，
美食：“素食主义者”
},{
名称：'新鲜花园'，
美食：“素食主义者”
},{
名称：'Cafe Epi'，
美食：“法式”
},{
名称:"大盘",，
美食：“中国”
}],
听众：{
groupchange:函数（商店、groupers）{
var grouped=restaurants.isGrouped（），
groupBy=groupers.items[0]？groupers.items[0]。属性：“”，
切换菜单项，len，i=0；
//C
Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function() {
    // wrapped in closure to prevent global vars.
    Ext.define('Restaurant', {
        extend: 'Ext.data.Model',
        fields: ['name', 'cuisine']
    });

    var restaurants = Ext.create('Ext.data.Store', {
        storeId: 'restaraunts',
        model: 'Restaurant',
        groupField: 'cuisine',
        sorters: ['cuisine','name'],
        data: [{
            name: 'Cheesecake Factory',
            cuisine: 'American'
        },{
            name: 'University Cafe',
            cuisine: 'American'
        },{
            name: 'Slider Bar',
            cuisine: 'American'
        },{
            name: 'Shokolaat',
            cuisine: 'American'
        },{
            name: 'Gordon Biersch',
            cuisine: 'American'
        },{
            name: 'Crepevine',
            cuisine: 'American'
        },{
            name: 'Creamery',
            cuisine: 'American'
        },{
            name: 'Old Pro',
            cuisine: 'American'
        },{
            name: 'Nola\'s',
            cuisine: 'Cajun'
        },{
            name: 'House of Bagels',
            cuisine: 'Bagels'
        },{
            name: 'The Prolific Oven',
            cuisine: 'Sandwiches'
        },{
            name: 'La Strada',
            cuisine: 'Italian'
        },{
            name: 'Buca di Beppo',
            cuisine: 'Italian'
        },{
            name: 'Pasta?',
            cuisine: 'Italian'
        },{
            name: 'Madame Tam',
            cuisine: 'Asian'
        },{
            name: 'Sprout Cafe',
            cuisine: 'Salad'
        },{
            name: 'Pluto\'s',
            cuisine: 'Salad'
        },{
            name: 'Junoon',
            cuisine: 'Indian'
        },{
            name: 'Bistro Maxine',
            cuisine: 'French'
        },{
            name: 'Three Seasons',
            cuisine: 'Vietnamese'
        },{
            name: 'Sancho\'s Taquira',
            cuisine: 'Mexican'
        },{
            name: 'Reposado',
            cuisine: 'Mexican'
        },{
            name: 'Siam Royal',
            cuisine: 'Thai'
        },{
            name: 'Krung Siam',
            cuisine: 'Thai'
        },{
            name: 'Thaiphoon',
            cuisine: 'Thai'
        },{
            name: 'Tamarine',
            cuisine: 'Vietnamese'
        },{
            name: 'Joya',
            cuisine: 'Tapas'
        },{
            name: 'Jing Jing',
            cuisine: 'Chinese'
        },{
            name: 'Patxi\'s Pizza',
            cuisine: 'Pizza'
        },{
            name: 'Evvia Estiatorio',
            cuisine: 'Mediterranean'
        },{
            name: 'Cafe 220',
            cuisine: 'Mediterranean'
        },{
            name: 'Cafe Renaissance',
            cuisine: 'Mediterranean'
        },{
            name: 'Kan Zeman',
            cuisine: 'Mediterranean'
        },{
            name: 'Gyros-Gyros',
            cuisine: 'Mediterranean'
        },{
            name: 'Mango Caribbean Cafe',
            cuisine: 'Caribbean'
        },{
            name: 'Coconuts Caribbean Restaurant & Bar',
            cuisine: 'Caribbean'
        },{
            name: 'Rose & Crown',
            cuisine: 'English'
        },{
            name: 'Baklava',
            cuisine: 'Mediterranean'
        },{
            name: 'Mandarin Gourmet',
            cuisine: 'Chinese'
        },{
            name: 'Bangkok Cuisine',
            cuisine: 'Thai'
        },{
            name: 'Darbar Indian Cuisine',
            cuisine: 'Indian'
        },{
            name: 'Mantra',
            cuisine: 'Indian'
        },{
            name: 'Janta',
            cuisine: 'Indian'
        },{
            name: 'Hyderabad House',
            cuisine: 'Indian'
        },{
            name: 'Starbucks',
            cuisine: 'Coffee'
        },{
            name: 'Peet\'s Coffee',
            cuisine: 'Coffee'
        },{
            name: 'Coupa Cafe',
            cuisine: 'Coffee'
        },{
            name: 'Lytton Coffee Company',
            cuisine: 'Coffee'
        },{
            name: 'Il Fornaio',
            cuisine: 'Italian'
        },{
            name: 'Lavanda',
            cuisine: 'Mediterranean'
        },{
            name: 'MacArthur Park',
            cuisine: 'American'
        },{
            name: 'St Michael\'s Alley',
            cuisine: 'Californian'
        },{
            name: 'Osteria',
            cuisine: 'Italian'
        },{
            name: 'Vero',
            cuisine: 'Italian'
        },{
            name: 'Cafe Renzo',
            cuisine: 'Italian'
        },{
            name: 'Miyake',
            cuisine: 'Sushi'
        },{
            name: 'Sushi Tomo',
            cuisine: 'Sushi'
        },{
            name: 'Kanpai',
            cuisine: 'Sushi'
        },{
            name: 'Pizza My Heart',
            cuisine: 'Pizza'
        },{
            name: 'New York Pizza',
            cuisine: 'Pizza'
        },{
            name: 'California Pizza Kitchen',
            cuisine: 'Pizza'
        },{
            name: 'Round Table',
            cuisine: 'Pizza'
        },{
            name: 'Loving Hut',
            cuisine: 'Vegan'
        },{
            name: 'Garden Fresh',
            cuisine: 'Vegan'
        },{
            name: 'Cafe Epi',
            cuisine: 'French'
        },{
            name: 'Tai Pan',
            cuisine: 'Chinese'
        }],
        listeners: {
            groupchange: function(store, groupers) {
                var grouped = restaurants.isGrouped(),
                    groupBy = groupers.items[0] ? groupers.items[0].property : '',
                    toggleMenuItems, len, i = 0;

                // Clear grouping button only valid if the store is grouped
                grid.down('[text=Clear Grouping]').setDisabled(!grouped);

                // Sync state of group toggle checkboxes
                if (grouped && groupBy === 'cuisine') {
                    toggleMenuItems = grid.down('button[text=Toggle groups...]').menu.items.items;
                    for (len = toggleMenuItems.length; i < len; i++) {
                        toggleMenuItems[i].setChecked(groupingFeature.isExpanded(toggleMenuItems[i].text));
                    }
                    grid.down('[text=Toggle groups...]').enable();
                } else {
                    grid.down('[text=Toggle groups...]').disable();
                }
            }
        }
    });

    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
            hideGroupedHeader: true,
            startCollapsed: true,
            id: 'restaurantGrouping'
        }),
        groups = restaurants.getGroups(),
        len = groups.length, i = 0,
        toggleMenu = [],
        toggleGroup = function(item) {
            var groupName = item.text;
            if (item.checked) {
                groupingFeature.expand(groupName, true);
            } else {
                groupingFeature.collapse(groupName, true);
            }
        };

    // Create checkbox menu items to toggle associated groupd
    for (; i < len; i++) {
        toggleMenu[i] = {
            xtype: 'menucheckitem',
            text: groups[i].name,
            handler: toggleGroup
        }
    }

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        collapsible: true,
        iconCls: 'icon-grid',
        frame: true,
        store: restaurants,
        width: 600,
        height: 400,
        title: 'Restaurants',
        resizable: true,
        features: [groupingFeature],
        tbar: ['->', {
            text: 'Toggle groups...',
            menu: toggleMenu
        }],

        // Keep checkbox menu items in sync with expand/collapse
        viewConfig: {
            listeners: {
                groupcollapse: function(v, n, groupName) {
                    if (!grid.down('[text=Toggle groups...]').disabled) {
                        grid.down('menucheckitem[text=' + groupName + ']').setChecked(false, true);
                    }
                },
                groupexpand: function(v, n, groupName) {
                    if (!grid.down('[text=Toggle groups...]').disabled) {
                        grid.down('menucheckitem[text=' + groupName + ']').setChecked(true, true);
                    }
                }
            }
        },
        columns: [{
            text: 'Name',
            flex: 1,
            dataIndex: 'name'
        },{
            text: 'Cuisine',
            flex: 1,
            dataIndex: 'cuisine'
        }],
        fbar  : ['->', {
            text:'Clear Grouping',
            iconCls: 'icon-clear-group',
            handler : function() {
                groupingFeature.disable();
            }
        }]
    });
});

<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" />