Need specific pattern for dhxLayout

Suite and Optimus Suite 5
#1

Hi,

I need a specific layout pattern. I tried to do that by myself but this seems be really complicated…

Have you got an algorythme to generate it from an HTML Table ? If not, I think it could be pretty useful provide something like that on your web site ! It’s just an idea ^^

Please, can you give me the JS code to this pattern ?

Idealy i would like make an external pattern in a separated JS file (dhtmlxlayout_patternXX.js). So if you can provide me code for these elements :

  • dhtmlXLayoutObject.prototype.tplData
  • dhtmlXLayoutObject.prototype._availAutoSize

Thanks in advance :wink:

ZuG’

#2

Hi again,

I will need another one :

Thanks :wink:

#3

I did that, but it doesn’t work fine :frowning:

<layout>
    <autosize hor="a;d;e" ver="c;d;e" rows="3" cols="3"/>
    <table data="a,d,e;b,d,e;c,d,e"/>    
    <row>
        <cell obj="a" wh="3,3" resize="ver" neighbors="a;b;c"/>
        <cell sep="ver" left="a,b,c" right="d;e" dblclick="c" rowspan="4"/>
        <cell obj="d" wh="3,1" resize="hor" neighbors="a,b,c;d;e" rowspan="4"/>
        <cell sep="ver" left="a,b,c;d" right="e" dblclick="d" rowspan="4"/>
        <cell obj="e" wh="3,1" resize="hor" neighbors="a,b,c;d;e" rowspan="4"/>
    </row>    
    <row sep="yes">
        <cell sep="hor" top="a" bottom="b;c" dblclick="a"/>
    </row>
    <row>
        <cell obj="b" wh="1,3" resize="ver" neighbors="a;b;c"/>
    </row>
    <row sep="yes">
        <cell sep="hor" top="a;b" bottom="c" dblclick="b"/>
    </row>
    <row>
        <cell obj="c" wh="1,3" resize="ver" neighbors="a;b;c"/>
    </row>    
</layout>

Any Idea ?

#4

Ok, I found my mistake :sunglasses:

The problem was on the rowspan.

I changed the rowspan’s value from 4 to 5 (3 cells + 2 separators). And it works :slight_smile:

it is not as complicated as I thought :smiley:

Correct code :

<layout>
    <autosize hor="a;d;e" ver="c;d;e" rows="3" cols="3"/>
    <table data="a,d,e;b,d,e;c,d,e"/>    
    <row>
        <cell obj="a" wh="3,3" resize="ver" neighbors="a;b;c"/>
        <cell sep="ver" left="a,b,c" right="d;e" dblclick="c" rowspan="5"/>
        <cell obj="d" wh="3,1" resize="hor" neighbors="a,b,c;d;e" rowspan="5"/>
        <cell sep="ver" left="a,b,c;d" right="e" dblclick="d" rowspan="5"/>
        <cell obj="e" wh="3,1" resize="hor" neighbors="a,b,c;d;e" rowspan="5"/>
    </row>    
    <row sep="yes">
        <cell sep="hor" top="a" bottom="b;c" dblclick="a"/>
    </row>
    <row>
        <cell obj="b" wh="1,3" resize="ver" neighbors="a;b;c"/>
    </row>
    <row sep="yes">
        <cell sep="hor" top="a;b" bottom="c" dblclick="b"/>
    </row>
    <row>
        <cell obj="c" wh="1,3" resize="ver" neighbors="a;b;c"/>
    </row>    
</layout>

JS pattern :

/* Custom Pattern : 5Z */
dhtmlXLayoutObject.prototype.tplData["5Z"]='<layout><autosize hor="a;d;e" ver="c;d;e" rows="3" cols="3"/><table data="a,d,e;b,d,e;c,d,e"/><row><cell obj="a" wh="3,3" resize="ver" neighbors="a;b;c"/><cell sep="ver" left="a,b,c" right="d;e" dblclick="c" rowspan="5"/><cell obj="d" wh="3,1" resize="hor" neighbors="a,b,c;d;e" rowspan="5"/><cell sep="ver" left="a,b,c;d" right="e" dblclick="d" rowspan="5"/><cell obj="e" wh="3,1" resize="hor" neighbors="a,b,c;d;e" rowspan="5"/></row><row sep="yes"><cell sep="hor" top="a" bottom="b;c" dblclick="a"/></row><row><cell obj="b" wh="1,3" resize="ver" neighbors="a;b;c"/></row><row sep="yes"><cell sep="hor" top="a;b" bottom="c" dblclick="b"/></row><row><cell obj="c" wh="1,3" resize="ver" neighbors="a;b;c"/></row></layout>';
dhtmlXLayoutObject.prototype._availAutoSize["5Z_hor"]=["a;b;c","d","e"];dhtmlXLayoutObject.prototype._availAutoSize["5Z_ver"]=["a;d;e","b;d;e","c;d;e"];
//v.3.5 build 120822

/*
Copyright DHTMLX LTD. http://www.dhtmlx.com
You allowed to use this component or parts of it under GPL terms
To use it on other terms or get Professional edition of the component please contact us at sales@dhtmlx.com
*/

Hope it will help someone :wink:

Bye !

ZuG’

#5

Hi
Or i can add one more variant (not such fine, but simpler):


Use additional 4G pattern and attach there simple 2E or 2U layouts in the cell D.