Question

问题如下。我试图从Liferay项目的jsp页面渲染extjs脚本。这是我的 home.jsp ：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html" isELIgnored="false" %>
<c:out value="${packetPortletMessage}" />
<div id="mainDiv"></div>

这里是 liferay-portlet.xml ：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.0.0//EN" 

"http://www.liferay.com/dtd/liferay-portlet-app_6_0_0.dtd">
<liferay-portlet-app>
<portlet>
<portlet-name>packetPortlet</portlet-name>
<instanceable>true</instanceable>
<remoteable>true</remoteable>
<header-portlet-css>/js/ext-4.2/resources/css/ext-all.css</header-portlet-css>
<header-portlet-javascript>/js/ext-4.2/ext-all-debug-w-comments.js</header-portlet-
javascript>
<header-portlet-javascript>/js/app.js</header-portlet-javascript>
</portlet>
</liferay-portlet-app>

所以，如果我的js脚本 app.js 是这样的：

    Ext.onReady( function () {
alert("I am an alert box!");
});`

一切正常 - 我看到警报。但。如果我尝试运行另一个 js 脚本（肯定在另一个环境中工作）：

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.selection.CellModel',
    'Ext.grid.*',
    'Ext.form.*',
    'Ext.ux.CheckColumn'
]);
Ext.onReady( function () {
    Ext.QuickTips.init();
    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    var divId = Ext.get("mainDiv");
    Ext.define('comptmodel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'int'},
            {name: 'label', type: 'string'},
            {name: 'packageIdFk', type: 'int'},
            {name: 'preVal',  type: 'string'},
            {name: 'inVal',       type: 'string'},
            {name: 'finalVal',  type: 'string'}
        ]
    });
    var store = Ext.define('comptstore', {
        extend: 'Ext.data.Store',
        model: 'comptmodel',
        autoLoad: true,
        pageSize: 35,
        proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
                type: 'json',
                root: 'components',
                id:   'idProperty',
                successProperty: 'meta.success'
            }
        }
    });
   var gridColumns = [
        {
            header: 'Label',
            dataIndex: 'label',
            flex: 1,
            sortable: false,
            id: 'label'
        },
        {
            header: 'Pre Commitee',
            dataIndex: 'preVal',
            sortable: true,
            width: 130,
            id: 'preVal'
        },
        {
            header: 'In Commiteee',
            dataIndex: 'inVal',
            width: 130,
            id: 'inVal'
        },
        {
            header: 'Final',
            dataIndex: 'finalVal',
            width: 130,
            id: 'finalVal'
        }
    ];
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: gridColumns,
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: divId,
        viewConfig: {
            stripeRows: true
        },
        plugins: [cellEditing]
    });

我遇到了麻烦。 未显示网格。
可能是因为 renderTo 属性。我说最后一个js文件适用于另一个环境 - 更简单的liferay portlet没有spring和hibernate，而 html 文件而不是 jsp 文件。在 html 文件中， js 脚本以这种方式插入（ html 文件的一部分）：

<link rel="stylesheet" href="resources/css/ext-all.css"/>
<script type="application/javascript" src="ext-all-debug-w-comments.js"></script>
<script type="application/javascript" src="app4.js" ></script>

对于从6.1开始的liferay版本的liferay教程的jsp文件（我在这里重写了来自 liferay-portlet.xml 的代码）：

<header-portlet-css>/js/ext-4.2/resources/css/ext-all.css</header-portlet-css>
<header-portlet-javascript>/js/ext-4.2/ext-all-debug-w-comments.js</header-portlet-
    javascript>
<header-portlet-javascript>/js/app.js</header-portlet-javascript>

所以，我认为在 jsp 页面的情况下 renderTo attr无法正常工作但我不确定。我试图解决这个问题但是没有成功。我期待你的帮助。

在Liferay中从html传递到jsp时，网格不会在ExtJS脚本中呈现

0 个答案: