Dziś będziemy upiększać naszą aplikację budując nową drogę z Tancerzem, wykorzystując do tego celu ExtJS. Nie będziemy poruszać kwestii programowania w JavaSrcipt, lecz omówimy wykorzystanie możliwości JS w połączeniu z Tancerzem. Na początek należy zaopatrzyć się w biblioteki ExtJS.... Na dysk lokalny pobieramy spakowany plik, który należy rozpakować, czego wynikiem powinien być katalog np.extjs-3.0. Proponujemy zmienić mu nazwę na extjs.
Instalację Tancerza pomijam, gdyż we wcześniejszych artykułach ją omawialiśmy. Krokiem następnym będzie przeniesienie extjs do katalogu, który będzie widoczny dla tancerza. Robimy to w ten sposób
Cytat:
(1) Przykładowa aplikacja ma katalog public, u mnie ścieżka dostępu jest taka C:\Dancer\myapp\public
(2) W tej lokalizacji tworzymy nowy katalog lib, przykładowa ścieżka C:\Dancer\myapp\public\lib
(3) Do katalogu lib przenosimy całą zawartość framworka extjs
Na tym etapie musimy zobaczyć jak pisze się w extjs. Proponuję krótki kurs z tej strony.... Kolejnym krokiem jest budowa nowej autostrady w przykładowym pliku myapp.pm
package myapp;
use Dancer;
use Template;
get '/' => sub {
template 'index';
};
#Tutaj dodaliśmy informację o nowej drodze
get '/extjs' => sub {
send_file '/naglowek.html';
};
true;
Kod naszej drogi pokazujemy poniżej
<html>
<head>
<script type="text/javascript"src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript"src="lib/extjs/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css"href="lib/extjs/resources/css/ext-all.css">
<!-- Wlasne skrypty i style -->
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
simple.render(document.body);
/*
* ================ Form 2 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
fsf.render(document.body);
/*
* ================ Form 3 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
var top = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'htmleditor',
id:'bio',
fieldLabel:'Biography',
height:200,
anchor:'98%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
/*
* ================ Form 4 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
var tabs = new Ext.FormPanel({
labelWidth: 75,
border:false,
width: 350,
items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
},
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tabs.render(document.body);
/*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
var tab2 = new Ext.FormPanel({
labelAlign: 'top',
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
/*
By turning off deferred rendering we are guaranteeing that the
form fields within tabs that are not activated will still be rendered.
This is often important when creating multi-tabbed forms.
*/
deferredRender: false,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});
</script>
<link rel="stylesheet" type="text/css"href="style.css">
</head>
<body>
</body>
</html>
Jak nietrudno zauważyć jest to składanka z dwóch przykładów, dostępnych na stronie domowej extjs. Uruchomienie programu jest w przeglądarce, wpisując adres http://localhost:3000/extjs. Jak zauważyliście zapewne, nie wywołuję w pliku myapp.pm słowa template, tylko send_file, gdyż ten plik nie jest szablonem w rozumieniu Tancerza. Poniżej zamieszczamy zdjęcie z uruchomionym programem, zdjęcie pierwsze... oraz drugie...
I jeszcze jedna uwaga na koniec. Ścieżki dostępu muszą się zgadzać z tymi na dysku twardym
<script type="text/javascript"src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript"src="lib/extjs/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css"href="lib/extjs/resources/css/ext-all.css">
|
