AEM：尝试在其他对话框中重用现有的图像对话框。使用cqinclude包含图像对话框时，选项卡中的选项卡不起作用

时间：2014-03-27 07:15:22

标签： cq5 aem xtype

我的组件有一个包含多个标签的对话框。一些选项卡是xtype =＆＃34; html5smartimage＆＃34;的小部件。接受图像和其他标签意味着接受不同的图像参数。

我将对话框分为两部分，使标签系统可供其他组件重用。在这里：

的 imageComponent

的 tab_image_information.xml 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:TabPanel"
    activeTab="0"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <imageTab1 jcr:primaryType="cq:Widget"
            itemId="imageTab1"
            cropParameter="./image1/imageCrop"
            ddGroups="[media]"
            fileNameParameter="./image1/fileName"
            fileReferenceParameter="./image1/fileReference"
            blankText="An image is required"
            name="./image1/file"
            requestSuffix="/image1.img.png"
            rotateParameter="./image1/imageRotate"
            sizeLimit="100"
            height="250"
            title="Desktop Image"
            uploadUrl="/tmp/upload/*"
            xtype="html5smartimage" />
        <imageTab2 jcr:primaryType="cq:Widget"
            itemId="imageTab2"
            cropParameter="./image2/imageCrop"
            ddGroups="[media]"
            fileNameParameter="./image2/fileName"
            fileReferenceParameter="./image2/fileReference"
            blankText="An image is required"
            name="./image2/file"
            requestSuffix="/image2.img.png"
            rotateParameter="./image2/imageRotate"
            sizeLimit="100"
            height="250"
            title="Tablet Image"
            uploadUrl="/tmp/upload/*"
            xtype="html5smartimage" />        
        <imageDetails jcr:primaryType="cq:Widget"
            title="Image Details"
            height="250"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <displayWidth jcr:primaryType="cq:Widget"
                    fieldDescription="Set display width for the image."
                    fieldLabel="Display Width"
                    name="./displayWidth"
                    xtype="textfield"/>
                <displayHeight jcr:primaryType="cq:Widget"
                    fieldDescription="Set display height for the image."
                    fieldLabel="Display Height"
                    name="./displayHeight"
                    xtype="textfield"/>
                <image1ResType jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./image1/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden" />
                <image2ResType jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./image2/sling:resourceType"
                    value="foundation/components/image"
                    xtype="hidden" />
            </items>
        </imageDetails>
    </items>
</jcr:root>

和 dialog.xml 我做了：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="Image Selection"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <imageSelection jcr:primaryType="cq:Widget"
            path="/apps/myproject/components/content/imageComponent/tab_image_information.infinity.json"
            xtype="cqinclude"/>
    </items>
</jcr:root>

这个组件本身运作良好。

现在我需要编写另一个组件（myComponent），其对话框将有两个选项卡 - 一个用于基本信息，另一个选项卡将 具有imageCompnent的功能。所以我试图使用infinity.json包含tab_image_information。这是myComponent：

的 myComponent的

的 tab_basic_information.xml 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Panel"
    title="Component Information"
    width="500">
    <items jcr:primaryType="cq:WidgetCollection">
        <text1 jcr:primaryType="cq:Widget"
            fieldLabel="Headline"
            name="./text1"
            xtype="textfield"
            maxlength="42"/>
        <text2 jcr:primaryType="cq:Widget"
            fieldLabel="Sub head"
            name="./text2"
            xtype="textfield"
            maxlength="42"/>
    </items>
</jcr:root>

和 dialog.xml 类似于：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="My Component"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <tabs jcr:primaryType="cq:TabPanel">
            <items jcr:primaryType="cq:WidgetCollection">
                <componentInformation
                    jcr:primaryType="cq:Widget"
                    path="/apps/myproject/components/content/myComponent/tab_basic_information.infinity.json"
                    xtype="cqinclude"/>
                <componentImageSelection
                    jcr:primaryType="cq:Widget"
                    title="Component Image Selection"
                    xtype="panel"
                    width="500">
                    <items jcr:primaryType="cq:WidgetCollection">                        
                        <imageSelection
                            jcr:primaryType="cq:Widget"
                            path="/apps/myproject/components/content/imageComponent/tab_image_information.infinity.json"
                            xtype="cqinclude"/>
                    </items>
                </componentImageSelection>
            </items>
        </tabs>
    </items>
</jcr:root>

在myComponent对话框中包含tab_image_information，但它没有正确布局，也没有保存该选项卡的信息（componentImageSelection）。

任何建议都受到高度赞赏。

1 个答案:

答案 0 :(得分：0)

您的tab_image_information是正确的，其类型为cq：TabPanel，而另一个tab_basic_information的类型为cq：Panel，请尝试使用cq：TabPanel。我认为这应该解决布局问题，这只是我最初的猜测更好地添加截图，以便更好地了解什么是确切的布局问题。在保存部分，JCR中保存了什么？发布数据时，请参阅网络选项卡中的请求，即完成配置后单击确定。在JCR中存储数据的另一种方法是创建自定义servlet以发布数据而不是使用OOTB。希望这可以帮助。还可以使用extjs标记您的问题，这对布局问题非常有帮助。

相关问题
最新问题