Modif de la vue des preview » History » Version 2
Version 1 (Marc Nicolas, 06/03/2012 11:39) → Version 2/3 (Marc Nicolas, 06/03/2012 11:39)
h1. Modif de la vue des preview
h2. +* +*h2. Première étape :*+
Dans le fichier viewDataDetails.js qui se trouve dans workspace/client-user/js/components/ :
Modification faite pour qu'on ne voit pas le panneau prévu pour les preview et les datasetLink si on n'en a pas dans le dataset. Et ré arrangement de la vu pour que le panel de la preview soit plus grande et au center et celui des données soit à l'ouest quand il a une preview de définie.
Tout d'abord j'ai mis en commentaire la ligne (vers les 118) : sitools.component.users.viewDataDetail.superclass.initComponent.call(this) car je l'appelle dans une autre fonction.
Dans la fonction getCmDefAndbuildForm :
Je regarde dans le datasetColumnModel si on a une colonne qui est une preview ou un lien vers d'autres dataset (si c'est le cas je passe un boolean à true). Pour cela j’insère le code suivant juste après this.datasetColumnModel = Json.dataset.columnModel dans le success de la requete Ajax :
<pre><code class="javascript">
var booleanPanelImg = false;
Ext.each(this.datasetColumnModel, function(item) {
if(item.columnRenderer == "displayImage" || item.columnRenderer == "datasetIconLink" || item.columnRenderer == "datasetLink"){
booleanPanelImg = true;
}
});
this.changeDisplayColumn(booleanPanelImg);
</code></pre>
La fonction changeDisplayColumn va appliquer les changements de vues selon le booleanPanelImg, qui est a true si on a une preview ou un lien et false dans le cas contraire.
Voici le code de cette fonction, que j'ai mis à la fin juste aprés la fonction findColumn:
<pre><code class="javascript">
changeDisplayColumn : function(bool){
if(bool){
this.formPanel.region = "west";
this.formPanelImg.region = "center";
this.formPanelImg.collasped = true;
}else{
this.formPanel.collapsible = false;
this.formPanel.split = false;
this.formPanel.width = 775;
this.items = [this.formPanel];
}
sitools.component.users.viewDataDetail.superclass.initComponent.call(this);
}
</code></pre>
h2. *+ *+h2. Deuxième étape :+*
Pour redimensionner le conteneur des 2 panels du viewDataDetail, il faut ouvrir le fichier client-user/js/desktop/desktop.js.
Dans la fonction addWinData
Il faut creer une variable qui va pouvoir nous dire quel type de fenetre est ouverte :
<pre><code class="javascript">
var moduleName = windowSettings.title.substring(0,12);
</code></pre>
Puis avec un test, voir si c'est une fenetre de type "Data details" et si c'est le cas redefnir ma taille de la fenetre comme cela par exemple :
<pre><code class="javascript">
if(moduleName == "Data details"){
var winWidth = 800;
}else{
var winWidth = DEFAULT_WIN_WIDTH;
}
</code></pre>
h2. +* +*h2. Première étape :*+
Dans le fichier viewDataDetails.js qui se trouve dans workspace/client-user/js/components/ :
Modification faite pour qu'on ne voit pas le panneau prévu pour les preview et les datasetLink si on n'en a pas dans le dataset. Et ré arrangement de la vu pour que le panel de la preview soit plus grande et au center et celui des données soit à l'ouest quand il a une preview de définie.
Tout d'abord j'ai mis en commentaire la ligne (vers les 118) : sitools.component.users.viewDataDetail.superclass.initComponent.call(this) car je l'appelle dans une autre fonction.
Dans la fonction getCmDefAndbuildForm :
Je regarde dans le datasetColumnModel si on a une colonne qui est une preview ou un lien vers d'autres dataset (si c'est le cas je passe un boolean à true). Pour cela j’insère le code suivant juste après this.datasetColumnModel = Json.dataset.columnModel dans le success de la requete Ajax :
<pre><code class="javascript">
var booleanPanelImg = false;
Ext.each(this.datasetColumnModel, function(item) {
if(item.columnRenderer == "displayImage" || item.columnRenderer == "datasetIconLink" || item.columnRenderer == "datasetLink"){
booleanPanelImg = true;
}
});
this.changeDisplayColumn(booleanPanelImg);
</code></pre>
La fonction changeDisplayColumn va appliquer les changements de vues selon le booleanPanelImg, qui est a true si on a une preview ou un lien et false dans le cas contraire.
Voici le code de cette fonction, que j'ai mis à la fin juste aprés la fonction findColumn:
<pre><code class="javascript">
changeDisplayColumn : function(bool){
if(bool){
this.formPanel.region = "west";
this.formPanelImg.region = "center";
this.formPanelImg.collasped = true;
}else{
this.formPanel.collapsible = false;
this.formPanel.split = false;
this.formPanel.width = 775;
this.items = [this.formPanel];
}
sitools.component.users.viewDataDetail.superclass.initComponent.call(this);
}
</code></pre>
h2. *+ *+h2. Deuxième étape :+*
Pour redimensionner le conteneur des 2 panels du viewDataDetail, il faut ouvrir le fichier client-user/js/desktop/desktop.js.
Dans la fonction addWinData
Il faut creer une variable qui va pouvoir nous dire quel type de fenetre est ouverte :
<pre><code class="javascript">
var moduleName = windowSettings.title.substring(0,12);
</code></pre>
Puis avec un test, voir si c'est une fenetre de type "Data details" et si c'est le cas redefnir ma taille de la fenetre comme cela par exemple :
<pre><code class="javascript">
if(moduleName == "Data details"){
var winWidth = 800;
}else{
var winWidth = DEFAULT_WIN_WIDTH;
}
</code></pre>