Javascript 尝试extjs5 simple gridpanel（示例无效）_Javascript_Extjs_Extjs5

Javascript 尝试extjs5 simple gridpanel（示例无效）

javascript extjs

Javascript 尝试extjs5 simple gridpanel（示例无效）,javascript,extjs,extjs5,Javascript,Extjs,Extjs5,我正在学习如何使用extjs5，我正在创建一个简单的gridpanel，但对我不起作用（在示例中使用renderTo:Ext.getBody（），我将此部分更改为renderTo:'example grid'以显示在中，但div显示为空。下面是代码： <head> <html:base /> <title><bean:write name="UserFormBean" property="Nombre"/></title> <l

我正在学习如何使用extjs5，我正在创建一个简单的gridpanel，但对我不起作用（在示例中使用

renderTo:Ext.getBody（）

，我将此部分更改为

renderTo:'example grid'

以显示在

中，但div显示为空。下面是代码：

<head>
<html:base />
<title><bean:write name="UserFormBean" property="Nombre"/></title>

<link rel="stylesheet" href="../../../../config/ext-theme-classic/build/resources/ext-theme-classic-all.css" type="text/css" />
<link rel="stylesheet" href="../../../../config/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css" type="text/css" />

<script src="../../../../config/js/ExtLocale/<%=request.getSession(true).getAttribute( "langSesion")%>"></script>
<script type="text/javascript" src="../../../../config/ext-theme-classic/build/ext-theme-classic.js"></script>
<script type="text/javascript" src="../../../../config/ext-theme-classic/build/ext-theme-classic-debug.js"></script>
<script type="text/javascript" src="../../../../config/js/ext-all-5.0.js"></script>
<script type="text/javascript" src="../../../../config/js/ext-all-debug-5.0.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

    //MODEL
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [ 'name', 'email', 'phone' ]
    });

    // DATASTORE
    var userStore = Ext.create('Ext.data.Store', {
        model: 'User',
        data: [
            { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
            { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
            { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
            { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
        ]
    });

    //GRIDPANEL
    Ext.create('Ext.grid.Panel', {
        renderTo: 'example-grid',
        store: userStore,
        width: 400,
        height: 200,
        title: 'Application Users',
        columns: [
            {
                text: 'Name',
                width: 100,
                sortable: false,
                hideable: false,
                dataIndex: 'name'
            },
            {
                text: 'Email Address',
                width: 150,
                dataIndex: 'email',
                hidden: true
            },
            {
                text: 'Phone Number',
                flex: 1,
                dataIndex: 'phone'
            }
        ]
    });     
}    
</script>
</head>
<body>
<div id="example-grid"></div>


Ext.onReady（函数（）{
//模型
Ext.define（'用户'{
扩展：“Ext.data.Model”，
字段：[“姓名”、“电子邮件”、“电话”]
});
//数据存储
var userStore=Ext.create（'Ext.data.Store'{
模型：“用户”，
数据：[
{姓名：'Lisa'，电子邮件：'lisa@simpsons.com，电话：'555-111-1224'}，
{姓名：'Bart'，电子邮件：'bart@simpsons.com，电话：'555-222-1234'}，
{姓名：'荷马'，电子邮件：'homer@simpsons.com，电话：'555-222-1244'}，
{姓名：'Marge'，电子邮件：'marge@simpsons.com，电话：'555-222-1254'}
]
});
//网格面板
Ext.create（'Ext.grid.Panel'{
renderTo:“示例网格”，
store:userStore，
宽度：400，
身高：200，
标题：“应用程序用户”，
栏目：[
{
文本：“名称”，
宽度：100，
可排序：false，
可隐藏的：错误，
数据索引：“名称”
},
{
文本：“电子邮件地址”，
宽度：150，
数据索引：“电子邮件”，
隐藏：真的
},
{
文字：“电话号码”，
弹性：1，
数据索引：“电话”
}
]
});     
}

我在项目中就是这样做的：

var grid = Ext.create('Ext.grid.Panel', {..})

var pageDivs = Ext.select('div .example-grid');

//get the .Page DIV should just be one.
var pageDiv = pageDivs.elements[0];

grid.render(pageDiv);

也就是说，如果您确实需要使用

onReady

方法（不推荐），则使用render而不是renderTo
您的原始代码应该可以工作，前提是您包含了必要的Ext文件
您可以在这里找到一种可行的单文件方法：。它稍有不同，它使用
Ext.application（）
而不是
onReady（）
。无论如何，都不推荐使用这两种方法

推荐的方法是使用
Sencha Cmd
最初生成、在开发过程中维护并最终构建Ext应用程序。
它是如何工作的？它没有显示吗？抱歉。示例grid div显示为空。您可以尝试以下操作：renderTo:“#example-grid”在其他方面仍然不工作，您已经尝试过了两次包含库。我建议您遵循入门指南。谢谢。我从
Ext.grid.Panel
中删除了
renderTo
，并添加了代码，但仍然不起作用。示例网格为空。我检查了*.js文件中的URL是否正确。没有，我尝试了
var pageDivs=Ext.select（'div#example grid'）；
也是。那么div#example grid或Ext.select（'div#example grid'）Gilsha发现了这个问题，最后只有一个右括号。（关闭Ext.onReady）。感谢您的帮助。