0

我使用这个例子来学习如何使用 extjs5，我创建了一个简单的网格面板，但对我不起作用（在例子中使用renderTo: Ext.getBody()，我将这部分更改renderTo: 'example-grid'为显示在内部<div id="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>

4

2 回答 2

1

如果您确实需要使用onReady方法（不推荐），您的原始代码应该可以工作，前提是您包含必要的 Ext 文件。

你可以在这里找到一个可行的单文件方法：Single File ExtJS 5 Application w/o Sencha Cmd。它略有不同之处在于它使用Ext.application()而不是onReady(). 一种或另一种方式，两者都不推荐。

推荐的方法是使用Sencha Cmd最初生成、在开发过程中维护并最终构建 Ext 应用程序。

于 2014-08-07T10:52:55.613 回答
0

这就是我在项目中完成的方式：

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);

IE。使用render而不是renderTo。

于 2014-08-07T09:09:51.733 回答