Une fenetre sur mesure
Nous allons créer et configurer une fenêtre en ExtJs3. Pour ce faire, nous allons creer un fichier "window.js" dans notre projet et l'inclure dans la page index.html crée dans la partie Premiers pas en ExtJs
- Reprenez la page d'index créer à l'étape précédente
- Dupliquez la en la nommant window.html
- Remplecez le bloc :
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'http://127.0.0.1/ext3/ExtJs3/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.Msg.alert('Information','La page de base en ExtJs3 fonctionne !')
});
</script>
- Par :
<script type="text/javascript" src="http://127.0.0.1/ext3/window.js"></script>
résultat de window.html :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="http://127.0.0.1/ext3/ExtJs3/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/src/locale/ext-lang-fr.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/window.js"></script>
</head>
<body>
</body>
</html>
Dans eclipse :
- faite un clique droit sur le repertoir: ext3 -> New -> Javascript File
- Entrez le nom : window.js
- Cliquez sur Finish
Dans le fichier window.js :
Ext.onReady(function(){
var maFenetre = new Ext.Window({
title : 'ma nouvelle fenere', //le titre de la fenetre
width:500, //la largeur
height:250 // la hauteur
})
maFenetre.show();
});
Pour tester le code : http://127.0.0.1/ext3/window.html