Foro

ExtJS con PHP/MySQL

0
Tengo un codigo que descargue dsd el foro de ExtJS... el tema es que el codigo funciona perfectamente de acuerdo a mis necesidades, pero tiene un problema, que la opción para eliminar no fué agregada. La opción no es dificil insertarla, el tema es que necesito saber la id de la fila a eliminar... por lo q no tengo idea como obtenerla. He intentado obtenerla a través de selModel, pero como mi conocimiento es casi nulo en javascript, he probado de 1000 formas y no he logrado dar con el codigo exacto. Bueno, este es el código completo en cuestion: 
Ext.BLANK_IMAGE_URL = 's.gif';
Ext.namespace( 'Ext.pmea' );
Ext.pmea.REMOTING_API = { 
  'url': 'index.php',
  'type': 'remoting',
  'actions': { 'pmeaActions': [%pmea_actions%] }
};
Ext.Direct.addProvider( Ext.pmea.REMOTING_API );
Ext.pmea.comboRenderer = function(combo) {
  return function(value) {
    var record = combo.findRecord(combo.valueField, value);
    return record ? record.get(combo.displayField) : combo.valueNotFoundText;
  }
};
Ext.pmea.Feedback = function ( title, message, type, delay ) {
  if ( !message ) return;
  if ( !type ) type = 'info';
  switch( type.toLowerCase() ) {
    case 'error':
      type = Ext.Msg.ERROR;
      break;
    case 'warning':
      type = Ext.Msg.WARNING;
      break;
    default:
      type = Ext.Msg.INFO;
      break;
  }
  var msg = Ext.Msg.show({
    title   : title,
    msg     : message,
    width   : 270,
    buttons : Ext.Msg.OK,
    icon    : type
  });
  if ( delay )
    msg.hide.defer( delay, msg );
}
Ext.pmea.EditorGridPanel = Ext.extend( Ext.grid.EditorGridPanel, {
  title: '[%pmea_title%]',
  frame: true,
  loadMask: true,
  stripeRows: true,
  // enableHdMenu: false,
  store: { fields: [], autoDestroy: true },
  columns: [],
  selModel: new Ext.grid.RowSelectionModel({}),
  
  initComponent: function() {
    var tablesCombo = new Ext.form.ComboBox({
      store: [%tables%],
      forceSelection: true,
      editable: false,
      triggerAction: 'all',
      width: 126
    });
    tablesCombo.on( 'select', this.selectTable, this );
    var bbar = new Ext.PagingToolbar({
      displayInfo: true,
      pageSize: [%pageSize%],
      hidden: true
    });
    var config = { 
      tbar: ['[%txt_tables%] ', tablesCombo,
        { xtype: 'tbspacer', width: 9 },
        { xtype: 'tbbutton', text: '[%txt_newrecord%]', handler: this.notyet, hidden: true }, ' ',
        { xtype: 'tbbutton', text: '[%txt_delrecord%]', handler: this.notyet, hidden: true }
      ],
      bbar: bbar
    };
    Ext.apply( this, Ext.apply( this.initialConfig, config ) );
    Ext.pmea.EditorGridPanel.superclass.initComponent.apply( this, arguments );
    tablesCombo.setValue( '[%initial_table%]' );
    this.selectTable( tablesCombo );
  },
  
  notyet: function() { Ext.pmea.Feedback( 'Not implemented yet',
    'You are invited to <b>donate</b> or<br />to <b>join</b> the developers team!<br /><br />' + 
    '<a href="http://www.jbruni.com.br/pmea/">http://www.jbruni.com.br/pmea/', 'info'
  )},
  
  selectTable: function( tablesCombo ) {
    var table = tablesCombo.getValue();
    if ( table == '' ) return;
    if ( !Ext.StoreMgr.containsKey( table ) )
      return pmeaActions.getFields( table, this.getId(), this.getStore );
    var store = Ext.StoreMgr.get( table );
    this.reconfigure( store, store.columns );
    var bbar = this.getBottomToolbar();
    bbar.bindStore( store );
    store.fireEvent( 'load', store, store.getRange(), store.lastOptions );
  },
  
  getStore: function( result, e ) {
    if ( !e.status  || ( result == 'pmeaFailure' ) )
      return Ext.pmea.Feedback( '[%txt_failure%]' , '[%txt_failuremsg%]', 'error' );
    var writer = new Ext.data.JsonWriter({ returnJson: false });
    var store = new Ext.data.DirectStore({
      storeId: result.table,
      // PROXY: Ext.data.DirectProxy (paramOrder,paramsAsHash,directFn,api)
      paramOrder: [ 'table', 'start', 'limit', 'sort', 'dir' ],
      paramsAsHash: false,
      api: {
        read    : pmeaActions.getData,
        create  : pmeaActions.newData,
        update  : pmeaActions.setData,
        destroy : pmeaActions.delData
      },
      totalProperty: 'total',
      // READER: Ext.data.JsonReader (totalProperty,root,idProperty) + FIELDS
      root: 'rows',
      idProperty: result.idProperty,
      fields: result.fields,
      // successProperty: 'success',
      writer: writer,
      // STORE: Ext.data.Store specific parameters
      autoSave: false,
      baseParams: { table: result.table },
      remoteSort: true,
      sortInfo: {
        field: '',
        direction: ''
      }
    });
    var columns = new Ext.grid.ColumnModel({
      columns: result.columns,
      defaults: {
        // menuDisabled: true,
        sortable: true
      }
    });
    var grid = Ext.getCmp( result.grid );
    Ext.each( columns.config, grid.setColumnEditor, columns );
    store.columns = columns;
    grid.on( 'afteredit', grid.onAfteredit, store );
    grid.reconfigure( store, columns );
    var bbar = grid.getBottomToolbar();
    bbar.bindStore( store );
    if ( bbar.hidden ) {
      bbar.show();
      var tbar = grid.getTopToolbar();
      tbar.items.each( function(item) { if (item.hidden) item.show(); } );
    }
    store.load({ params: { start: 0, limit: [%pageSize%] } });
  },
  
  setColumnEditor: function( column, index ) {
    if ( column.editor.xtype != 'combo' )
      return true;
    var combo = new Ext.form.ComboBox({
      forceSelection: true,
      editable: false,
      triggerAction: 'all',
      lazyRender:true,
      mode: 'local',
      store: column.editor.enums
    });
    this.setEditor( index, combo );
    this.setRenderer( index, Ext.pmea.comboRenderer( combo ) );
    return true;
  },
  
  onAfteredit: function( e ) {
    var table = this.baseParams.table;
    e.record.set( 'pmea_table', table + '|' );
    e.record.set( 'pmea_table', table );
    this.save();
  }
});
Ext.reg( 'pmeaGrid', Ext.pmea.EditorGridPanel );
Ext.Direct.on( 'exception', function(e) { Ext.pmea.Feedback( '[%txt_failure%]', e.message, 'error' ) } );
function pmeaLayout() {
  new Ext.Viewport({
    layout: 'fit',
    items: { xtype: 'pmeaGrid' }
  });
}
var pmea = function() { return { init: pmeaLayout } }();
Ext.onReady( pmea.init, pmea, true );
Bueno, espero que alguien pueda ayudarme... estoy demasiado complicado, me cuesta mucho entender javascript. Adiós! PD: Aquí se encuentra el script completo que utilizo: <!-- m -->http://extjs.com/forum/showthread.php?t=72340<!-- m --> Por si alguien quisiera usar el script...

5 Respuestas

Mejores votos Por fecha Solución
0
tienes que editar esta línea: 
{ xtype: 'tbbutton', text: '[%txt_delrecord%]', handler: this.notyet, hidden: true }
por algo como 
{ xtype: 'tbbutton', text: '[%txt_delrecord%]', handler: this.deleteAction,scope:this, hidden: true }
y luego crear el método deleteAction: 
deleteAction: function(){
	var selections = this.selModel.getSelections();
	Ext.each(selections,function(record){
		console.debug(record.data); //aqui viene la información del registro seleccionado
	});
  },
saludos <!-- s:D --><!-- s:D -->
0
Vale.. me ha funcionado perfecto, he logrado eliminar datos de la tabla. Adiós.
0
Lo último... El script funciona con una clase en PHP la que recibe las ordenes de javascript. Bueno, de funcionar, funciona todo bien, el problema es que utilizo [b]Ext.Ajax.request({});[/b] para borrar el dato de la MySQL ( en ello no hay problema, si funciona perfecto ) el tema es que el valor no lo envía de la forma que originalmente recibe los datos la clase de php. Lo que debiése enviar por post ( firebug no señala una key del POST específico ) sería algo así: {"action":"pmeaActions","method":"getData","data":["prueba",0,30,"","ASC"],"type":"rpc","tid":3} Pero lo que realmente envía es un campo post llamado key, con la id del campo a eliminar... el tema que a pesar de ser funcional, destruye en cierta forma la lógica de la clase. Adjunto el javascript: Aquí se define el handler para borrar un campo determinado 
{ xtype: 'tbbutton', text: '[%txt_delrecord%]', handler: this.deleteHandler,scope:this, hidden: true }
Este sería el código que se encarga de borrar los datos, envíando mediante post un campo llamado key con la id del campo. 
  deleteHandler: function handleDelete(){
	var selections = this.selModel.getSelections(); 
	if(selections.length > 0){
		Ext.MessageBox.confirm('Confirmar acción','¿Realmente deseas borrar la selección?', function(btn){
			if(btn=='yes'){
				Ext.each(selections,function(record){
					this.store.remove(record);
					Ext.Ajax.request(
					{
						waitMsg: 'Guardando cambios...',
						url: 'index.php',
						params: {
							key: record.data.[%tables_id%]
						},                                      
					});
				});
			}
		});
	}
	else
	{
		Ext.MessageBox.alert('Advertencia','Selecciona un elemento a eliminar');
	}
  },
Me dedique a revisar un rato como funcionaba el asunto de cuando edita un campo, y también cuando reordena los valores ( porque logicamente igual interactua con el php enviando datos mediante post, en el mismo formato que especifique más arriba ), pero como entiendo poco de javascript no logré ver la forma de como realmente funcionaba.
0
Hola, parece que tu problema tiene que ver con el writer de JSON. Verás el componente JsonWriter tiene implementado por defecto el siguiente código para el cadso de borrado: 
 destroyRecord : function(rec) {
        return rec.id;
    }
Pero tu puedes cambiarlo cuando creas el writer, pro ejemplo: 
   ..
   writer: new Ext.data.JsonWriter({
        destroyRecord : function (rec) {
            // Aquí va tu código  que sobrecribe al original
            // finalmente debes de devolver un resultado
        }
   }) // writer
  ..
Si deseas aun más control sobre el formato de envío, puedes sobrescribir la función render el código original de la misma es: 
/**
     * Final action of a write event.  Apply the written data-object to params.
     * @param {String} action [Ext.data.Api.actions.create|read|update|destroy]
     * @param {Record[]} rs
     * @param {Object} http params
     * @param {Object} data object populated according to DataReader meta-data "root" and "idProperty"
     */
    render : function(action, rs, params, data) {
        Ext.apply(params, data);
        if (this.encode === true) {
            params[this.meta.root] = Ext.encode(params[this.meta.root]);
        }
    }
De esta función lo importante es lo que apliques al objeto params que es lo que irá en la llamada HTTP. La verdad es que yo trabajo en XML y mi esperiencia con JSON es de apenas iniciado, pero creo que con lo que te indico podrás conseguir lo que quieres. Espero haberte ayudado <!-- s:roll: --><!-- s:roll: -->
0
Bueno, despues de revisar el código me di cuenta que era mucho más facil de lo que pensaba, solo debía colocar esto: [b]pmeaActions.delData();[/b] Y realizaba la función que necesitaba. Gracias [b][i]stock[/i][/b] y [b][i]jucahoca[/i][/b]

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Ext JS 3