EXTJS

Question

SLT, je suis debutant en extjs et je cherche a afficher dans une datagrid suivant a une rechercher effectuée dans la bd a partir d'un formulaire comme je fait voici la page js:
var fieldset_demo = [{
columnWidth: 0.4,
            xtype: 'fieldset',
            labelWidth: 120,
            title:'demo',
id:'fieldsetdemo',
            defaults: {width: 140},	// 
            defaultType: 'textfield',
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
            border: true,
            style: {
                'margin-left': '10px', // when you add custom margin in IE 6...
                'margin-right': Ext.isIE6 ? (Ext.isStrict ? '-10px' : '-13px') : '0'  // you have to adjust for it somewhere else
            },
            items: [

{
xtype:'textfield',
fieldLabel: 'price',
name: 'price',
id: 'price',

},

{
xtype:'textfield',
fieldLabel: 'company',
name: 'company',
id: 'company',

},

{
xtype:'datefield',
fieldLabel: 'date',
name: 'date',
id: 'date',
allowBlank:false
},

{
xtype:'textfield',
fieldLabel: 'size',
name: 'size',
id: 'size',

},

{
xtype:'textfield',
fieldLabel: 'visible',
name: 'visible',
id: 'visible',

},

{
xtype:'textfield',
fieldLabel: 'id',
name: 'id',
id: 'id',

}

]
}];


var colModeldemo =new Ext.grid.ColumnModel([
{header:'price',  sortable: true,  dataIndex: 'price'},
{header:'company',  sortable: true,  dataIndex: 'company'},
{header:'date',  sortable: true,  dataIndex: 'date'},
{header:'size',  sortable: true,  dataIndex: 'size'},
{header:'visible',  sortable: true,  dataIndex: 'visible'},
{id:'id',header: "ID", width:3, sortable: true,  dataIndex: 'id'}
]);

var grid_demo=[{
columnWidth:1,
xtype:'fieldset',
id:'grid_demo',
layout: 'fit',
            items: {
            xtype: 'grid',
            ds: dsdemo,
            cm: colModeldemo,
id:'griddemo',
            sm: new Ext.grid.RowSelectionModel({
                singleSelect: true,
                listeners: {
                    rowselect: function(sm, row, rec) {
Ext.getCmp('formdemo').getForm().loadRecord(rec);


Ext.getCmp('serach').enable();
                    }
                }
            }),
            autoExpandColumn: 'id',
            height: 200,
            title:'liste des demo',
            border: true,
        listeners: {
        	render: function(g) {
        		g.getSelectionModel().selectRow(0);
        	},
        	delay: 10  
        },
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: dsdemo,
displayInfo: true,
displayMsg: 'Page actuelle {0} - {1} of {2}',
emptyMsg: 'Pas de résultat'
})
        	}
        }];
Ext.onReady(function(){
    Ext.QuickTips.init(); 
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();

function format_todate(val){
return Ext.util.Format.date(val,'Y-m-d');
}

dsdemo.load(
{
waitMsgTarget: true,
waitMsg:'chargement en cours ...',
params:{start: 0, limit: 20},
callback: function(records, options, success){
if(!success){
MsgErreurChargement('ERREUR d\'execution de requette de chargement');
}
}
});	

    var gridFormdemo = new Ext.FormPanel({
        id: 'formdemo',
        frame: true,
        labelAlign: 'left',
        title: 'demo',
        bodyStyle:'padding:5px',
        Width: '100%',
        layout: 'column',	// Specifies that the items will now be arranged in columns
        renderTo: bd,
items: [
grid_demo,
fieldset_demo 

],buttons:[

{
 text: 'rechercher',
 id:'serach',

  		 handler: function(){
   					if (gridFormdemo.getForm().isValid()) {
var box = Ext.MessageBox.wait('opération en cours...', 'Mise a jours réuissi');

Ext.Ajax.request({
url: 'core/frm/action/demo.action.php',
method: 'POST',
id: 'update_request',
params: {

price: Ext.getCmp('price').getValue(),
company: Ext.getCmp('company').getValue(),
date:format_todate(Ext.getCmp('date').getValue()),
size: Ext.getCmp('size').getValue(),
visible: Ext.getCmp('visible').getValue(),
id: Ext.getCmp('id').getValue(),

operation: 'DELETE'
},
callback: function(options, success, response){
var result = Ext.util.JSON.decode(response.responseText);

if(result.success=='true'){
dsdemo.reload();
Ext.getCmp('grid_demo').doLayout();
Ext.getCmp('serach').disable();
box.hide();
DBMsgInfo('');
}else{
box.hide();
MsgErreurChargement(result.result);
}					
}
});
}
else{
MsgErreurChamps('');
}
}
}
]
        		
    });
   
});

PetoleTeam · Answer

Bonjour,
as tu lu DataGrid extJS évoluée, c'est sur ce site...
;O)

cs_haithouma · Answer

MERCI ,
 mais j'ai un problème d'affichage le résultat de la recherche a partir d'un formulaire dans une datagrid!!!!!!!!
merci d'avancepour tous personne qui veut m'aider

PetoleTeam · Answer

Bonjour,
...mais j'ai un problème d'affichage ...
Ca je l'ai bien compris, mais sans plus de détail et ne connaissant pas ExtJS, je te conseilles de voir du coté de Ext JS 3.2 Examples

;O)

cs_haithouma · Answer

le problème reste le même:aide moi:voici ma page js:il rester toujours charger l'opération de recherche sans aucun résultat:comment je modifier la page js pour qu'il soit afficher le résultat dans le datagrid ce code:
var fieldset_ascel_users = [{
columnWidth:1,
            xtype: 'fieldset',
            labelWidth: 200,
            title:'Effectuer une recherche par:',
id:'fieldsetascel_users',
            defaults: {width: 210},	// 
          
            autoHeight: true,
            bodyStyle: Ext.isIE ? 'padding:0px 0 5px 15px;' : 'padding:10px 150px;',
            border: true,
            style: {
                'margin-left': '300px', // when you add custom margin in IE 6...
                'margin-right': Ext.isIE6 ? (Ext.isStrict ? '-10px' : '-13px') : '0'  // you have to adjust for it somewhere else
            },
            items: [{
xtype:'textfield',
fieldLabel:'nom_enseig',
name: 'nom_enseig',
id: 'nom_enseig',

},{
xtype:'textfield',
fieldLabel:'prenom_enseig',
name: 'prenom_enseig',
id: 'prenom_enseig',

},

{
xtype:'textfield',
fieldLabel:'concepteur du cours',
name: 'grade',
id: 'grade',

},

{ 
xtype:'datefield',
fieldLabel: 'Intervalle de temps de',
name: 'date_soumission',
id: 'date_soumission',

},

{
xtype:'textfield',
fieldLabel: 'Intitule UE',
name: 'lib_unite',
id: 'lib_unite',

},

{
xtype:'textfield',
fieldLabel: 'Nature UE',
name: 'nature_unite',
id: 'nature_unite',

},

{
xtype:'textfield',
fieldLabel: 'cadre de la proposition',
name: 'projet',
id: 'projet',

},



{
xtype:'textfield',
fieldLabel: 'type de diplome',
name: 'libelle_diplome',
id: 'libelle_diplome',

},

{
xtype:'textfield',
fieldLabel: 'Universite',
name: 'nom_universite',
id: 'nom_universite',

},
{
xtype:'textfield',
fieldLabel: 'Etablissement',
name: 'nom_etablissement',
id: 'nom_etablissement',

}
   ,
{
xtype:'textfield',
fieldLabel: 'nbr_ens',
name: 'nbr_ens',
id: 'nbr_ens',

},
{
xtype:'textfield',
fieldLabel: 'credit',
name: 'credit',
id: 'credit',

}
 ,{
        
      defaultType: 'radio',
    title: 'Favorite Color',
items:[{


boxLabel:'Les propositions avec dêpot de contenu',
name: 'depot',
inputValue: 'avecdepot',
}, {
boxLabel:'Les propositions sans dêpot de contenu',
name: 'depot',
inputValue: 'sansdepot',
}, {
checked: true,
boxLabel: 'Toutes les propositions',
name: 'depot',
inputValue: 'Tous',
}
]

     }]

}];


var colModelascel_users =new Ext.grid.ColumnModel([
{header:'proposition',  sortable: true,  dataIndex: 'date_soumission'},
{header:'UE',  sortable: true,  dataIndex: 'lib_unite'},
{header:'credit',  sortable: true,  dataIndex: 'credit'},
{header:'nature_unite',  sortable: true,  dataIndex: 'nature_unite'},
{header:'LIBELLE_DIPLOME',  sortable: true,  dataIndex: 'LIBELLE_DIPLOME'},
{header:'nom_enseig',  sortable: true,  dataIndex: 'nom_enseig'},
{header:'prenom_enseig',  sortable: true,  dataIndex: 'prenom_enseig'},
{header:'grade',  sortable: true,  dataIndex: 'grade'},
{header:'NOM_UNIVERSITE',  sortable: true,  dataIndex: 'NOM_UNIVERSITE'},
{header:'NOM_ETABLISSEMENT',  sortable: true,  dataIndex: 'NOM_ETABLISSEMENT'},
{header:'nbr_ens',  sortable: true,  dataIndex: 'nbr_ens'},
{header:'projet',  sortable: true,  dataIndex: 'projet'},
{id:'code_ue',header: "ID", width:3, sortable: true,  dataIndex:'code_ue'}


]);

var grid_ascel_users=[{
columnWidth:0.98,
xtype:'fieldset',
id:'grid_ascel_users',
layout: 'fit',
            items: {
            xtype: 'grid',
            ds: dsascel_users,
            cm: colModelascel_users,
id:'gridascel_users',
         
            autoExpandColumn: 'code_ue',
            height: 150,
            title:'liste des propositions:',
            border: true,
        listeners: {
        	render: function(g) {
        		g.getSelectionModel().selectRow(0);
        	},
        	delay: 10  
        },
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: dsascel_users,
displayInfo: true,
displayMsg: 'Page actuelle {0} - {1} of {2}',
emptyMsg: 'Pas de résultat'
})
        	}
        }];
Ext.onReady(function(){
    Ext.QuickTips.init(); 
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();

function format_todate(val){
return Ext.util.Format.date(val,'Y-m-d');
}

dsascel_users.load(
{
waitMsgTarget: true,
waitMsg:'chargement en cours ...',
params:{start: 0, limit: 20},
callback: function(records, options, success){
if(!success){
MsgErreurChargement('ERREUR d\'execution de requette de chargement');
}
}
});	

    var gridFormascel_users = new Ext.FormPanel({
        id: 'formascel_users',
        frame: true,
        labelAlign: 'left',
        title: 'Proposition de cours',
        bodyStyle:'padding:5px',
        Width: '100%',
        layout: 'column',	// Specifies that the items will now be arranged in columns
        renderTo: bd,
items: [
grid_ascel_users,
fieldset_ascel_users

],buttons:[

{
 text: 'Rechercher',
 id:'RECHERCHER',

  		 handler: function(){
   					if (gridFormascel_users.getForm().isValid()) {
var box = Ext.MessageBox.wait('opération en cours...', 'rechercher en cours...');

Ext.Ajax.request({
url: 'core/frm/action/rech.action.php',
method: 'POST',
id: 'update_request',
params: {

grade: Ext.getCmp('grade').getValue(),
credit: Ext.getCmp('credit').getValue(),
date_soumission:format_todate(Ext.getCmp('date_soumission').getValue()),
lib_unite: Ext.getCmp('lib_unite').getValue(),
nature_unite: Ext.getCmp('nature_unite').getValue(),
projet: Ext.getCmp('projet').getValue(),
depot: Ext.getCmp('depot').getValue(),
libelle_diplome: Ext.getCmp('libelle_diplome').getValue(),
nom_universite: Ext.getCmp('nom_universite').getValue(),
                                        nom_etablissement: Ext.getCmp('nom_etablissement').getValue(),
 nbr_ens: Ext.getCmp('nbr_ens').getValue(),
     nom_enseig: Ext.getCmp('nom_enseig').getValue(),
  prenom_enseig: Ext.getCmp('prenom_enseig').getValue(),
  start: 0, limit: 20,
operation: 'RECHERCHER'
},
callback: function(options, success, response){
var result = Ext.util.JSON.decode(response.responseText);

if(result.success=='true'){
Ext.getCmp('grid_ascel_users').doLayout();
box.hide();
DBMsgInfo('');
}else{
box.hide();
MsgErreurChargement(result.result);
}					
}
});
}
else{
MsgErreurChamps('');
}
}
}
]
        		
    });
   
});

PetoleTeam · Answer

Bonjour,
Navré je ne peux rien pour toi !
un dernier lien...
peut être voir sur un forum dédié à EXT JS
;O)

EXTJS

5 réponses

Votre réponse

Discussions similaires