Results 1 to 1 of 1

Thread: Problem to display correctly after migrate to ext3

  1. #1

    Default Problem to display correctly after migrate to ext3

    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:

    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 apparatre 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 apparratre la fentre 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 apparatre 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:

    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;
    	
    	//cration 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()
        });
        
    });
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •