Forum

Accueil » Liferay Portal » English » 3. Development

Vue combinée Vue Plate Arborescence
Sujets [ Précédent | Suivant ]
toggle
Ankur Doshi
Creating ExtJS portal(Sencha) in Liferay
29 août 2012 14:02
Réponse

Ankur Doshi

Rang: New Member

Publications: 2

Date d'inscription: 5 juillet 2012

Publications Récentes

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
Andew Jardine
RE: Creating ExtJS portal(Sencha) in Liferay
29 août 2012 17:34
Réponse

Andew Jardine

Rang: Regular Member

Publications: 184

Date d'inscription: 22 décembre 2010

Publications Récentes

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.
Ankur Doshi
RE: Creating ExtJS portal(Sencha) in Liferay
30 août 2012 11:45
Réponse

Ankur Doshi

Rang: New Member

Publications: 2

Date d'inscription: 5 juillet 2012

Publications Récentes

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.