PDA

View Full Version : ext js suitable for Velocity templates?



elhanan
28 Oct 2010, 3:07 AM
hi..

we are examining ext js for our java framework, which has a ui rendered in manual html , and custom java script.

we have nested vms (like document,conains head,form,panes which contain textbox,checkbox etc..) what we would like to know can we change said vm's to generate the javascript needed to render the controls.

meaning the controls vm should be self-sufficient and contain only javascript that should refer to other elements.

also is ext js supporting hebrew and RTL layout?

Condor
28 Oct 2010, 3:24 AM
I don't know Velocity, so I can't answer that question (sounds doable though).

Regarding RTL support: Read this thread (http://www.sencha.com/forum/showthread.php?70202-Built-RTL-support-for-3.0-mostly-working).

elhanan
28 Oct 2010, 3:39 AM
here is an example of a template of a text_box and the panel around it, we have one main form, and several panels in it, could this be done in ext? can have a form have several "panels" which contain fields?

ignore the todo.txt it's there by mistake

I don't know Velocity, so I can't answer that question (sounds doable though).

Regarding RTL support: Read this thread (http://www.sencha.com/forum/showthread.php?70202-Built-RTL-support-for-3.0-mostly-working).

Condor
28 Oct 2010, 3:50 AM
Your template would be something like:

<input id="$controller.id" />
<script type="text/css">
var field = new Ext.form.TextField({
applyTo: '$controller.id',
...
});
</script>

elhanan
28 Oct 2010, 3:53 AM
does this mean the TextBoxes,CheckBoxes and so on, could be created an independent manner (i.e not just in field array inside a form, but as individual components

Condor
28 Oct 2010, 4:03 AM
Should the fields be part of a layout (e.g. FormPanel) or rendered into existing HTML (that's the solution I posted above)?

elhanan
28 Oct 2010, 4:32 AM
the fields may or may not be part of a panel (the panel is just a frame with an icon) the user sets by applying custom jsp taglibs which render the vm behind the scenes, so a jsp could be like so:
<pmp:panel ognl="person" resource="person" columns="1" border="true" >
<pmp:textField ognl="ssn" resource="ssn"/>
<pmp:textField ognl="name" resource="name"/>
<pmp:date ognl="birthDate" resource="birthDate"/>
<pmp:checkbox resource="isRetired" ognl="retired"/>
</pmp:panel>
or without the panel.

either way there is always going to be one huge form, containing the panels and the fields (which may or may not be inside panels)

so what i wanna examine is can i change the form vm templae to ext's form, and the panel template to a panel of ext, and then layout the fields independently according to the layout of the jsp.

elhanan
28 Oct 2010, 5:14 AM
i'm trying to do this:
inside the body tag
<label id="lbltxt">
<input id="txt"/>
<script >

var field = new Ext.form.TextField({
applyTo: 'txt',
allowBlank: false
});
var label = new Ext.form.Label({
applyTo: 'lbltxt',
forId: 'txt',
text: 'hello',
allowBlank: false
});

</script>

but i can't see anything, does everything have to be in head?

Condor
28 Oct 2010, 5:16 AM
This should work (if you fix it to be proper (X)HTML).

elhanan
28 Oct 2010, 5:17 AM
what do you mean fix to be proper xhtml?

Condor
28 Oct 2010, 5:21 AM
<label id="lbltxt"></label>
<input id="txt" type="text" />
<script type="text/css">
Ext.onReady(function(){
...
});
</script>

ps. Those ids are not fixed and are going to be gererated by Velocity I hope?

elhanan
28 Oct 2010, 5:42 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title id='title'>HTML Page setup Tutorial</title>


<link rel="stylesheet" type="text/css" href="./ext321js/resources/css/ext-all.css" />

<script type="text/javascript" src="./extjs321/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="./extjs321/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">

// Path to the blank image should point to a valid location on your server

Ext.BLANK_IMAGE_URL = './extjs321/resources/images/default/s.gif';

var go=false;

Ext.onReady(function(){

go=true;

});

</script>


</head>

<body>


<form id="mainForm">

<script type="text/javascript">
var form_employee = new Ext.form.Form({

labelAlign: 'right',

labelWidth: 175,

applyTo: 'mainForm',

buttonAlign: 'right'

});


alert('t');
</script>


<input id='txt'/>

<script type="text/javascript">

var employee_name = new Ext.form.TextField({

applyTo: 'txt',

fieldLabel: 'hello',

name: 'txt',

width: 190

});


var employee_title = new Ext.form.TextField({

fieldLabel: 'lbltxt',

name: 'lblTxt',
width: 190

});
</script>

</form>

</body>
</html>


<label id="lbltxt"></label>
<input id="txt" type="text" />
<script type="text/css">
...

ps. Those ids are not fixed and are going to be gererated by Velocity I hope?

Condor
28 Oct 2010, 6:07 AM
Forgot to mention that you also need to put everything inside an Ext.onReady call (otherwise you can't use applyTo).