PDA

View Full Version : Problem to display correctly after migrate to ext3



23 Dec 2009, 2:49 PM
Hi,

I just migrated to ext3 and I have 1 problem.

The toolbar of my grid don't display correctly (see attachments)

I try to modify css but that's don't work.

anybody have any ideas??

Thanks

here is the grid code:




// ----------------
// Global Var
// ----------------

var EmployeDataStore;
var EmployeColumnModel;
var EmployeListingEditorGrid;
var EmployeListingWindow;
var privilege;

// ----------------
// Datastore
// ----------------
EmployeDataStore = new Ext.data.GroupingStore({
id: 'EmployeDataStore',
proxy: new Ext.data.HttpProxy({
url: 'datastore/datastore_employe.php',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id_employe'
},[
{name: 'IDEmploye', type: 'int', mapping: 'id_employe'},
{name: 'Nom', type: 'string', mapping: 'nom'},
{name: 'Prenom', type: 'string', mapping: 'prenom'},
{name: 'Adresse', type: 'string', mapping: 'adresse'},
{name: 'Ville', type: 'string', mapping: 'localite'},
{name: 'NPA', type: 'string', mapping: 'npa'},
{name: 'Telephone', type: 'string', mapping: 'tel'},
{name: 'E-mail', type: 'string', mapping: 'email'},
{name: 'Actif', type: 'string', mapping: 'actif'}

]),
sortInfo:{field: 'Nom', direction: "ASC"}
});
// ----------------
// ColumnModel
// ----------------


EmployeColumnModel = new Ext.grid.ColumnModel(
[{
header: '#',
dataIndex: 'IDEmploye',
readOnly: true,
hidden: true
},{
header: lg1,
dataIndex: 'Nom',
readOnly: true,



},{
header: lg2,
dataIndex: 'Prenom',
readOnly: true,



},{
header: lg3,
readOnly: true,
dataIndex: 'Adresse',
readOnly: true,



},{
header: lg4,
dataIndex: 'NPA',
readOnly: true,


},{
header: lg5,
dataIndex: 'Ville',
readOnly: true,


},{

header: lg6,
dataIndex: 'Telephone',
readOnly: true,



},{

header: lg7,
dataIndex: 'E-mail',
readOnly: true,



}]
);
EmployeColumnModel.defaultSortable= true;
EmployeView = new Ext.grid.GroupingView({
forceFit:true,
// custom grouping text template to display the number of items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
});

// ----------------
// Grid
// ----------------
EmployeListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'EmployeListingEditorGrid',
store: EmployeDataStore,
cm: EmployeColumnModel,
view:EmployeView,
height: 700,
autoWidth:false,
maxHeigth: 700,
//width: 1000,
enableColLock:true,
enableColumnResize :true,
enableColumnHide :true,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
tbar: [{
text: lg8,
tooltip: 'Nouvel Employé',
iconCls:'add',//this is defined in our styles.css
handler : function(){
if(CanSee(privilege) )ShowForm('include/html/employe/ form_employe_autoload.inc.php',FormWindowEmploye);
else cannotSee();


}



},'-',




boxEmployeActif=new Ext.form.Checkbox({
id:'boxEmployeActif',
boxLabel :lg9





})
],
plugins: [new Ext.ux.grid.Search({
searchText: lg10,
mode: 'local',
minChars:1,
iconCls:'search',
width : 200,
minCharsTipText:'Veuillez taper minimum 1 characteres',
autoFocus:true,
menuStyle:'checkbox',
disableIndexes:['IDEmploye'],
position:'top'


}),new Ext.ux.grid.AutoSizeColumns()]
});

// ----------------
// Function
// ----------------

// Fonction qui perment de faire apparaître un menu contextuel lors d'un click droit
// Input: grid , RowIndex, e



function onEmployeListingEditorGridContextMenu(grid, rowIndex, e) {
if(CanSee(privilege))
{
if(CanSee(privilege))
{
e.stopEvent();
var coords = e.getXY();
EmployeListingContextMenu.rowRecord = grid.store.getAt(rowIndex);
grid.selModel.selectRow(rowIndex);
EmployeListingSelectedRow=rowIndex;
EmployeListingContextMenu.showAt([coords[0], coords[1]]);
}
}
}

//Fonction qui permet de faire apparraître la fenêtre de formulaire avec le bon employe preloadé
// input void


function modifyEmploye()
{
var selection = EmployeListingEditorGrid.selModel.getSelected();
var id= selection.data.IDEmploye;
var link = 'include/html/employe/form_employe_autoload.inc.php?modifier_employe='+id;
ShowForm(link,FormWindowEmploye);
}

//Fonction qui fait apparaître une Popup de confirmation avant la suppression d'une ligne
// input: void

function ConfirmDeleteEmploye(){
if(EmployeListingEditorGrid.selModel.getCount()==1)
{

var selection = EmployeListingEditorGrid.selModel.getSelected();
var nom= selection.data.Nom;
var prenom= selection.data.Prenom;
var nomComplet= prenom+' '+nom;
var answer = Ext.MessageBox.confirm('Confirmation','Vous allez supprimer '+nomComplet+'. Continuer?', deleteEmploye);

}
else
{
Ext.MessageBox.alert('Attention','Vous ne pouvez supprimer plus d\'un employe à la fois');
}

}

// Fonction qui supprimme une ligne
// input: answer de ConfirmDeleteEmploye ()

function deleteEmploye(answer)
{
if(answer=='yes')
{
var selection = EmployeListingEditorGrid.selModel.getSelected();
var id= selection.data.IDEmploye;
var box = Ext.MessageBox.wait('En Traitement');

Ext.Ajax.request({

waitMsg: 'En cours...',
url:'datastore/datastore_employe.php',


params:{
task:"DELETE",
id_modif_employe: id

},
success:function(response){
var result=eval(response.responseText);

switch(result){
case 1:
boxEmployeActif.reset();
EmployeDataStore.reload();
box.hide();
break;
case 2:
boxEmployeActif.reset();
EmployeDataStore.reload();
box.hide();
Ext.MessageBox.alert('Attention',
'Supprimer tous les horaires et les mandats assignés à cet agent ');
break;
default:
Ext.MessageBox.alert('Attention',
'erreur!');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('Erreur',
'Problème de connection réessayez plus tard!');
}
});

}

}


// ----------------
// Listerners
// ----------------

EmployeListingContextMenu = new Ext.menu.Menu({
id: 'EmployeListingEditorGridContextMenu',
items: [
{ text: 'Modifier cet employé',handler:modifyEmploye },
{ text: 'Supprimer cet employé',handler:ConfirmDeleteEmploye }

]
});


EmployeListingEditorGrid.addListener('rowcontextmenu', onEmployeListingEditorGridContextMenu);

boxEmployeActif.on("check",function ()
{

var test = boxEmployeActif.getValue();
if(test == true)
{
EmployeDataStore.baseParams = {task: 'ACTIF'};
EmployeDataStore.reload();
}

else
{
EmployeDataStore.baseParams = {task: 'LISTING'};
EmployeDataStore.reload();
}
});




// ----------------
// Event
// ----------------


EmployeDataStore.load();



and here the viewport code:


Ext.onReady(function(){



Ext.QuickTips.init();
// ----------------
// Set listeners on form fields
// ----------------


Ext.override(Ext.form.Field, {
fireKey : function(e) {
if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
this.fireEvent('specialkey', this, e);
}
else {
this.fireEvent(e.type, this, e);
}
}
, initEvents : function() {
this.el.on("focus", this.onFocus, this);
this.el.on("blur", this.onBlur, this);
this.el.on("keydown", this.fireKey, this);
this.el.on("keypress", this.fireKey, this);
this.el.on("keyup", this.fireKey, this);
this.originalValue = this.getValue();
}
});

Ext.override(Ext.form.ComboBox, {
initEvents : function(){
Ext.form.ComboBox.superclass.initEvents.call(this);
this.keyNav = new Ext.KeyNav(this.el, {
"up" : function(e){
this.inKeyMode = true;
this.selectPrev();
},
"down" : function(e){
if(!this.isExpanded()){
this.onTriggerClick();
}else{
this.inKeyMode = true;
this.selectNext();
}
},
"enter" : function(e){
this.onViewClick();
this.delayedCheck = true;
this.unsetDelayCheck.defer(10, this);
},
"esc" : function(e){
this.collapse();
},
"tab" : function(e){
this.onViewClick(false);
return true;
},
scope : this,
doRelay : function(foo, bar, hname){
if(hname == 'down' || this.scope.isExpanded()){
return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
}
return true;
},
forceKeyDown : true
});
this.queryDelay = Math.max(this.queryDelay || 10,
this.mode == 'local' ? 10 : 250);
this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
if(this.typeAhead){
this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
}
if((this.editable !== false) && !this.enableKeyEvents) {
this.el.on("keyup", this.onKeyUp, this);
}
if(this.forceSelection){
this.on('blur', this.doForce, this);
}
},
onKeyUp : function(e){
if(this.editable !== false && !e.isSpecialKey()){
this.lastKey = e.getKey();
this.dqTask.delay(this.queryDelay);
}
Ext.form.ComboBox.superclass.onKeyUp.call(this, e);
}
});



// This is an inner body element within the Details panel created to provide a "slide in" effect
// on the panel body without affecting the body's box itself. This element is created on
// initial use and cached in this var for subsequent access.
var detailEl;

//création du style centrer
Ext.ns('Ext.ux.layout');

Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
// private
setItemSize : function(item, size){
this.container.addClass('ux-layout-center');
item.addClass('ux-layout-center-item');
if(item && size.height > 0){
if(item.width){
size.width = item.width;
}
item.setSize(size);
}
}
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;

/*
* CenterLayout demo panel
*/




// This is the main content center region that will contain each example layout panel.
// It will be implemented as a CardLayout since it will contain multiple panels with
// only one being visible at any given time.
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 6,
border: false,
items:[EmployeListingEditorGrid,MandatListingEditorGrid,HoraireListingEditorGrid,ModifPassword,salaire,ModifEntreprise,HomeListingEditorGrid,DemarchageListingEditorGrid]


};



var menupanel= new Ext.tree.TreePanel({

id: 'tree-panel',
title: 'Menu',
region:'north',
split: true,
height: 10,
minSize: 10,
autoScroll: true,


// tree-specific configs:
rootVisible: false,
height:200,
singleExpand: true,
useArrows: true,
loader: new Ext.tree.TreeLoader(),
root: treeNode= new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Home',
id:8,
leaf: true
},{
text: 'Employe',
id:1,
leaf: true
}, {
text: 'Mandat',
id:2,
leaf: true
}, {
text: 'Horaire',
id:3,
leaf: true
}, {
text: 'Password',
id:4,
leaf: true
}, {
text: 'Salaire',
id:5,
leaf:true
}
, {
text: 'Entreprise',
id:7,
leaf: true
}, {
text: 'Demarchage',
id:9,
leaf: true
},{
text: 'Logout',
id:6,
leaf: true
}]
}),
rootVisible: false


});


// Assign the changeLayout function to be called on tree node click.
menupanel.on('load',function(){if(CanSee(privilege)==false)
{menupanel.getRootNode().childNodes[6].getUI().hide();
menupanel.getRootNode().childNodes[7].getUI().hide();
}
}) ;
menupanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
switch(n.id){

case 1:
EmployeDataStore.reload();
Ext.getCmp('content-panel').layout.setActiveItem('EmployeListingEditorGrid');
break;
case 2:
MandatDataStore.reload();
Ext.getCmp('content-panel').layout.setActiveItem('MandatListingEditorGrid');
break;
case 3:
//HoraireDataStore.reload();
Ext.getCmp('content-panel').layout.setActiveItem('HoraireListingEditorGrid');
//datastoreSelectMois.reload();
break;
case 4:
Ext.getCmp('content-panel').layout.setActiveItem('ModifPassword');
break;
case 5:
WindowsSalaire.getUpdater().refresh();
Ext.getCmp('content-panel').layout.setActiveItem('salaire');
break;
case 7:
Ext.getCmp('content-panel').layout.setActiveItem('ModifEntreprise');
break;

case 6:
document.location="logout.php";
break;
case 8:
HomeDataStore.reload();
Ext.getCmp('content-panel').layout.setActiveItem('HomeListingEditorGrid');
break;
case 9:
DemarchageDataStore.reload();
Ext.getCmp('content-panel').layout.setActiveItem('DemarchageListingEditorGrid');
break;

}

});

// This is the Details panel that contains the description for each example layout.
var detailsPanel = {
id: 'details-panel',
title: 'Details',
region: 'center',
bodyStyle: 'padding-bottom:15px;background:#eee;',
autoScroll: true,
contentEl:'entreprise'
};

// Finally, build the main layout once all the pieces are ready. This is also a good
// example of putting together a full-screen BorderLayout within a Viewport.
new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30

}, new Ext.Panel({
layout: 'border',
id: 'layout-browser',
title:'E-fox',
region:'west',
collapsible: true,
border: false,
split:true,
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [menupanel, detailsPanel]
}),
contentPanel
],


renderTo: Ext.getBody()
});

});