Forums

Home » Liferay Portal » English » 3. Development

RSS (Opens New Window)

Combination View Flat View Tree View
Threads [ Previous | Next ]
Ankur Doshi
Creating ExtJS portal(Sencha) in Liferay
August 29, 2012 2:02 PM
Answer

Ankur Doshi

Rank: New Member

Posts: 2

Join Date: July 5, 2012

Recent Posts

Hello, I am new to liferay and i want to create sample ExtJS portal to show the usage of ExtJS 4.x in plugin sdk.
Can anyone please provide me with some sample about the same. If you can provide me a link to the tutorial to create simple ExtJS portal.
I used Sencha to create a simple page with forms and fields.
I was trying to used the same in Liferay portal. But the page portal doesnot display anything.

Following is the code:

*********************************************Portlet.xml********************************************

<?xml version="1.0"?>

<portlet-app xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" version="2.0">

<portlet>
<portlet-name>test</portlet-name>
<display-name>Test</display-name>
<portlet-class>com.liferay.util.bridges.mvc.MVCPortlet</portlet-class>
<init-param>
<name>view-template</name>
<value>/html/test/app.html</value>
</init-param>
<expiration-cache>0</expiration-cache>
<supports>
<mime-type>text/html</mime-type>
</supports>
<portlet-info>
<title>Test</title>
<short-title>Test</short-title>
<keywords></keywords>
</portlet-info>
<security-role-ref>
<role-name>administrator</role-name>
</security-role-ref>
<security-role-ref>
<role-name>guest</role-name>
</security-role-ref>
<security-role-ref>
<role-name>power-user</role-name>
</security-role-ref>
<security-role-ref>
<role-name>user</role-name>
</security-role-ref>
</portlet>
</portlet-app>

******************************************* liferay-portlet.xml *******************************************
<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.1.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_1_0.dtd">

<liferay-portlet-app>

<portlet>
<portlet-name>test</portlet-name>
<icon>/icon.png</icon>
<instanceable>false</instanceable>
<header-portlet-css>/css/extjs/ext-all.css</header-portlet-css>
<footer-portlet-javascript>/js/extjs/ext-all.js</footer-portlet-javascript>
<css-class-wrapper>test-portlet</css-class-wrapper>
</portlet>
<role-mapper>
<role-name>administrator</role-name>
<role-link>Administrator</role-link>
</role-mapper>
<role-mapper>
<role-name>guest</role-name>
<role-link>Guest</role-link>
</role-mapper>
<role-mapper>
<role-name>power-user</role-name>
<role-link>Power User</role-link>
</role-mapper>
<role-mapper>
<role-name>user</role-name>
<role-link>User</role-link>
</role-mapper>
</liferay-portlet-app>


******************************************* app.html *************************************
<!DOCTYPE html>

<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>HELLO WORLD</body>
</html>


***********************************app.js **************************************************

Ext.Loader.setConfig({
enabled: true
});

Ext.application({
views: [
'MyForm'
],
autoCreateViewport: true,
name: 'MyApp',
renderTo: Ext.getBody()
}
);

*********************************************Myform.js **********************************************
/*
* File: app/view/MyForm.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',

height: 250,
width: 400,
bodyPadding: 10,
title: 'My Form',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'fieldset',
title: 'My Fields'
},
{
xtype: 'button',
text: 'MyButton'
},
{
xtype: 'tabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
},
{
xtype: 'checkboxfield',
anchor: '100%',
fieldLabel: 'Label',
boxLabel: 'Box Label'
},
{
xtype: 'textareafield',
anchor: '100%',
fieldLabel: 'Enter Name:'
},
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: 'Enter city'
}
]
});

me.callParent(arguments);
}

});

*****************************Viewport.js**********************************

/*
* File: app/view/Viewport.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Ext JS 4.0.x library, under independent license.
* License of Sencha Architect does not include license for Ext JS 4.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/

Ext.define('MyApp.view.Viewport', {
extend: 'MyApp.view.MyForm',
renderTo: Ext.getBody(),
requires: [
'MyApp.view.MyForm'
]
});


The forms and all other fields are not displayed.
Though the Hello World message appears fine.
Please let me know where I am wrong.

Thanks
Flag
Andew Jardine
RE: Creating ExtJS portal(Sencha) in Liferay
August 29, 2012 5:34 PM
Answer

Andew Jardine

Rank: Junior Member

Posts: 96

Join Date: December 22, 2010

Recent Posts

The first thing you should consider changing is adding additional entried to the liferay-portlet.xml file such that the other JS files you listed are referenced. I would also chagne teh app.html to be a JSP page and remove the html, head amd body tags. These are added for you by Liferay. The best way to get this to work I think would the to do the following --

1. Install the Liferay plugins for eclipse
2. Create a new Liferay project (portlet project)
3. Add your Sencha files (*.js and *.css) to the corresponding folders
4. Update the liferay-portlet.xml to reference the additional css and js files
5. Deploy

and see where that takes you. Another thing to consider would be merging the JS files together into one JS file for the portlet or alternatively moving them into the theme so that they can be compressed and minified. I worked with ExtJS on a project once and one of the core issues we had to solve around performance was the bloated nature of these frameworks that want you to place every piece of code into it's on JS file. At one point, for a single page with 8 portlets we had over 118 JS requests! Page load time went from 37 seconds to 8 seconds once I had that number down to 42.
Flag
Ankur Doshi
RE: Creating ExtJS portal(Sencha) in Liferay
August 30, 2012 11:45 AM
Answer

Ankur Doshi

Rank: New Member

Posts: 2

Join Date: July 5, 2012

Recent Posts

Hello Andew,
I made the changes you suggested. But still no luck. I get error message in firebug as
"NetworkError: 404 Not Found - http://localhost:8080/js/app.js"
guess it is unable to find the app.js file. I want to reference the aap.js file from JSP file.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css">
<script type="text/javascript" src="/../../js/app.js"></script>
This is the <b>Test</b> portlet in View mode and app.jsp.

Any help please.
Flag