Hi today I want to share how to create layout in ext environment in liferay. Though it should not be used as ext environment is hard to manage but some times we don't want to maintain seperate development environment (plugin) in that case it can be used.
Here are the steps:
Step 1:
In ext-web\docroot\WEB-INF create a file name liferay-layout-templates-ext.xml
Step 2:
Open file liferay-layout-templates-ext.xml and put code
<?xml version="1.0"?>
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 5.2.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_5_2_0.dtd">
<layout-templates>
<custom>
<layout-template id="4_2_columns" name="custom(4-2)">
<template-path>
/layouttpl/customlayout/4_2_columns.tpl
</template-path>
<wap-template-path>
/layouttpl/customlayout/4_2_columns.wap.tpl
</wap-template-path>
<thumbnail-path>
/layouttpl/customlayout/4_2_columns.png
</thumbnail-path>
</layout-template>
</custom>
</layout-templates>
This is file where your mapping goes regarding .tpl files used to create your layout.
Step 3:Make a layouttpl folder at same level as html folder in ext-web. Inside this folder make customlayout folder.
Step 4:Now in customlayout folder you need to keep your .png and .tpl files related to layout as per the mapping .Now create a files with name 4_2_columns.tpl and 4_2_columns.wap.tpl in customlayout folder and put below code.
<div class="columns-2" id="content-wrapper">
<table class="lfr-grid" id="layout-grid">
<tr>
<td class="lfr-column thirty" id="column-1" width="25%" valign="top">
$processor.processColumn("column-1")
</td>
<td class="lfr-column thirty" id="column-2" width="25%" valign="top">
$processor.processColumn("column-2")
</td>
<td class="lfr-column thirty" id="column-3" width="25%" valign="top">
$processor.processColumn("column-3")
</td>
<td class="lfr-column thirty" id="column-4" width="25%" valign="top">
$processor.processColumn("column-4")
</td>
</tr>
<tr>
<td colspan="4"><div style="border-bottom: 3px dotted #405DD5;"></div></td>
</tr>
<tr>
<td colspan="4">
<table class="lfr-grid" id="layout-grid">
<tr>
<td class="lfr-column thirty" id="column-5" valign="top">
$processor.processColumn("column-5")
</td>
<td class="lfr-column seventy" id="column-6" valign="top">
$processor.processColumn("column-6")
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and in 4_2_columns.wap.tpl put below code
<table>
<tr>
<td>
$processor.processColumn("column-1")
</td>
<td>
$processor.processColumn("column-2")
</td>
<td>
$processor.processColumn("column-3")
</td>
<td>
$processor.processColumn("column-4")
</td>
<td>
$processor.processColumn("column-5")
</td>
<td>
$processor.processColumn("column-6")
</td>
</tr>
</table>
Now do ant deploy from ext-web and start the server after successful deployment. In dock in Layout Template you will get new layout. add it and see.
That's all.
