AEM:尝试在其他对话框中重用现有的图像对话框.当使用cqinclude包含图像对话框时，选项卡中的选项卡无法工作

Question

我有一个具有多个选项卡的对话框组件。有些选项卡是xtype="html5smartimage"的小部件，用于接受图像，而其他选项卡则意味着接受不同的图像参数。

我将对话框分成两部分，使制表符系统可以被其他组件重用。是这样的:

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)，其对话框将有两个选项卡-一个用于基本信息，另一个选项卡将具有imagecompent的功能。我尝试用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)的信息。

Answer 1

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