ExtJS 5.使用renderTo在div中包含面板

时间:2015-05-07 13:00:05

标签: javascript extjs extjs5

使用ExtJS 5.0.1我创建了一个Ext.panel.Panel,我试图在id="contenedor"的面板中显示,但从不显示。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<html>
<head>
    <html:base />
    <title><bean:message key="label.BIA.informe.proceso.verDependencias"/></title>
    <link rel="stylesheet" href="../../config/ProcopEstilos.css" type="text/css" />
    <link rel="stylesheet" href="../../config/css/ext-all.css" type="text/css" />
    <link rel="stylesheet" href="../../config/css/core.css" type="text/css" />
    <style type="text/css">
        .x-panel-icon {background-position:540 1px !important;}
    </style>
    <script src="../../config/Procop.js"> </script>
    <script src="../../config/js/ext-all-5.0.js"></script>
    <script src="../../config/js/ext-dom-utils.js"></script>
    <script src="../../config/js/ExtLocale/<%=request.getSession(true).getAttribute( "langSesion")%>"></script>
    <script src="../../config/js/DD_roundies.js"></script>
    <script src="/<bean:message key="global.application.context.name"/>/private/busquedas/busquedas.js" defer="defer"></script>     

    <script type="text/javascript">   

        var panel;

            var anchura = windowWidth;
            anchura *= 0.970;
            anchura += 1;
            var altura = windowHeight;
            altura *= 0.98;

            panel = Ext.create('Ext.panel.Panel',{
                id:'ventana',
                autoScroll:true,
                height: altura,
                width: anchura,
                title: '&nbsp;<bean:message key="breadcrumbs.gestionInventarios.consultaMultiple" />',
                iconCls:'vDependencias',
                layout: 'border',
                closable: false,
                renderTo: Ext.get('contenedor'),
                resizable: false,
                items:[
                   {xtype:'button',text: 'Press Me'}, 
                   {xtype:'textfield',text: 'Press Me'}
                ],
                frame: true
            });    
    </script>
</head>
<body class="body2">

    <div style="text-align: center; height: 100%;">
        <div id="contenedor" style="margin: 5px auto 0px; width: 100%; height: 98%;">
            <html:form action="/GIConsultaMultiple?method=consultaMultiple">                        
                <!-- Elementos ocultos del formulario -->
                    <html:hidden property="idTipoActivo" />
                    <html:hidden property="idActivo" />
                    <html:hidden property="nombreActivo" />
                <!-- Fin elementos del formulario -->               
            </html:form>
        </div>
    </div>
</body>
</html>

我尝试了renderTo: Ext.get('contenedor')renderTo: 'contenedor'Ext.getBody()

我做错了什么?

1 个答案:

答案 0 :(得分:0)

解决了,我的问题非常简单。

我尝试使用<head>标记内的代码进行渲染,因此尚未创建文档。