Foro

Subir un archivo al servidor con Extjs

0
Hola amigos el dia de hoy tengo una gran duda, quisiera saber si es posible subir un archivo al servidor utilizando la libreria Extjs y mirar algunos ejemplos... de antemano muchas gracias por su ayuda amigos....
0
subir como tal no, para eso necesitas hacerlo con un lenguaje del lado del servidor como php, jsp, etc... lo que si puedes hacer es colocar el formulariio con un
xtype: textfield
, con un
inputType: 'file'
y al formpanel colocarle
fileUpload: true
... con eso puedes recibir del lado servidor el archivo que escogiste en el formulario y guradarlo donde quieras.
0
ahhhhhhhhhhhhhhhhhh gracias graciassssss amigoooo...... muchas gracias... una ves del ladoo del servidor ya es facil subir el archivo..
0
Amigo he probado al subir el archivo pero lastimosamente no lo hace efectivo.... aqui dejo mi codigo para que me ayuden porque cuando envio el formulario no esta recibiendo el archivo del lado del servidor.... de antemano muchas gracias por su ayuda function cargarclientes(){ this.form = new Ext.form.FormPanel({ url: 'cargar.php', width:330, bodyStyle:'margin-left:10px;', border:false, waitMsgTarget: true, labelWidth: 50, items:[ {xtype:'textfield',fieldLabel:'Archivo', inputType: 'file', fileUpload: true, name:'archivo', width:200, allowBlank:false} ] }); this.cargar= function() { this.form.getForm().submit( { waitMsg:'Cargando...', success: function(f,a) { Ext.Msg.show({ title: 'Cargando', //<- el título del diálogo msg: 'Archivo Cargado Correctamente !!', //<- El mensaje buttons: Ext.Msg.OK, //<- Boton de Aceptar icon: Ext.Msg.INFO // <- un ícono de Info }); //this.form.getForm().reset(); wine.close(); }, failure: function(f,a) { Ext.Msg.show({ title: 'Error', //<- el título del diálogo msg: a.result.errormsg, //<- El mensaje buttons: Ext.Msg.OK, //<- Boton de Aceptar icon: Ext.Msg.ERROR // <- un ícono de Info }); } } );//submit }//cargar var winc; if(!winc){ winc = new Ext.Window({ title: '.: Cargar Clientes :.', bodyStyle: 'padding:10px;background-color:#fff;', width:315, height:150, modal:true, buttons: [{text:'Cargar',handler:this.cargar,scope:this}], items:[this.form] }); } winc.show(this); }
0
esta parte del código :
fileUpload: true
debes dejarla en el formulario no en el textfield... trata con eso y nos avisas
0
Nooo amigooo ya lo puse el fileUpload en el form y tampoco funciona aqui dejo mi codigo.... muchas gracias por su ayuda...
function cargarclientes(){
	
	this.form = new Ext.form.FormPanel({
			url: 'cargar.php',
			width:330,
			bodyStyle:'margin-left:10px;',
			border:false,
			waitMsgTarget: true,
			labelWidth: 50,
			fileUpload: true,
			items:[
            {xtype:'textfield', 
             fieldLabel:'Archivo', 
			 inputType:'file', 
			 name:'archivo', 
			 emptyText: 'Debe seleccionar un archivo',
			 width:200}			
			]
		});
	
	this.cargar= function()
			{
					 
				this.form.getForm().submit(
				{
					waitMsg:'Cargando...',
					success: function(f,a)
					{
						Ext.Msg.show({
										title: 'Cargando', //<- el título del diálogo
										msg: 'Archivo Cargado Correctamente !!', //<- El mensaje
										buttons: Ext.Msg.OK, //<- Boton de Aceptar
										icon: Ext.Msg.INFO // <- un ícono de Info
									});
						
					
						winc.close();
					},
				
					failure: function(f,a)
					{
						Ext.Msg.show({
										title: 'Error', //<- el título del diálogo
										msg: a.result.errormsg, //<- El mensaje
										buttons: Ext.Msg.OK, //<- Boton de Aceptar
										icon: Ext.Msg.ERROR // <- un ícono de Info
									});
					}
				}
				);//submit
			}//cargar
	
	
	var winc;
				
		if(!winc){
				
		 winc = new Ext.Window({
			
			title: '.: Cargar Clientes :.',
			bodyStyle: 'padding:10px;background-color:#fff;',
			width:315,
			height:150,
			x:50,
			y:50,
			modal:true,
			buttons: [{text:'Cargar',handler:this.cargar,scope:this}],
			items:[this.form]                
						    });
		
		}
		winc.show(this);
}
0
Amigos les pido su ayuda ya que necesito cargar un archivo con urgencia y no he podido hacerlo en el anterior mensaje deje mi codigo... De antemano muchas gracias...
0
utiliza este plugin:
/*!
 * Ext JS Library 3.0+
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.form');
/**
 * @class Ext.ux.form.FileUploadField
 * @extends Ext.form.TextField
 * Creates a file upload field.
 * @xtype fileuploadfield
 */
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
    /**
     * @cfg {String} buttonText The button text to display on the upload button (defaults to
     * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
     * value will be used instead if available.
     */
    buttonText: 'Browse...',
    /**
     * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
     * text field (defaults to false).  If true, all inherited TextField members will still be available.
     */
    buttonOnly: false,
    /**
     * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
     * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
     */
    buttonOffset: 3,
    /**
     * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
     */
    // private
    readOnly: true,
    /**
     * @hide
     * @method autoSize
     */
    autoSize: Ext.emptyFn,
    // private
    initComponent: function(){
        Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
        this.addEvents(
            /**
             * @event fileselected
             * Fires when the underlying file input field's value has changed from the user
             * selecting a new file from the system file selection dialog.
             * @param {Ext.ux.form.FileUploadField} this
             * @param {String} value The file value returned by the underlying file input field
             */
            'fileselected'
        );
    },
    // private
    onRender : function(ct, position){
        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
        this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
        this.el.addClass('x-form-file-text');
        this.el.dom.removeAttribute('name');
        this.fileInput = this.wrap.createChild({
            id: this.getFileInputId(),
            name: this.name||this.getId(),
            cls: 'x-form-file',
            tag: 'input',
            type: 'file',
            size: 1
        });
        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
            text: this.buttonText
        });
        this.button = new Ext.Button(Ext.apply(btnCfg, {
            renderTo: this.wrap,
            cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
        }));
        if(this.buttonOnly){
            this.el.hide();
            this.wrap.setWidth(this.button.getEl().getWidth());
        }
        this.fileInput.on('change', function(){
            var v = this.fileInput.dom.value;
            this.setValue(v);
            this.fireEvent('fileselected', this, v);
        }, this);
    },
    // private
    getFileInputId: function(){
        return this.id + '-file';
    },
    // private
    onResize : function(w, h){
        Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
        this.wrap.setWidth(w);
        if(!this.buttonOnly){
            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
            this.el.setWidth(w);
        }
    },
    // private
    onDestroy: function(){
        Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
        Ext.destroy(this.fileInput, this.button, this.wrap);
    },
    // private
    preFocus : Ext.emptyFn,
    // private
    getResizeEl : function(){
        return this.wrap;
    },
    // private
    getPositionEl : function(){
        return this.wrap;
    },
    // private
    alignErrorIcon : function(){
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    }
});
Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
y lo usarias algo así:
{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'photo-path',
            buttonText: '',
            buttonCfg: {
                iconCls: 'upload-icon'
            }
}
aqui checa el ejemplo: <!-- m -->http://www.extjs.com/deploy/dev/example ... pload.html<!-- m --> Saludos y suerte
0
Bien muchisimass graciasss stock mirare como me va con el plugin... Gracias...
0
Listo.... con la ayuda de stock logre subir el archivo al servidor muchas gracias...
0
que bien!! saludos
0
hola soy nueva en este foro y estoy aprendiendo a programar en extjs estoy n l mismo dilema no puedo subir un archivo al servidor quiero usar tu plugin pero en verdad no c en donde ubicarlo y como llamarlo por favor m prodrian ayudar de antemano muchas gracias...
0
necesitas importar el código del plugin a tu html y luego lo utilizas así:
{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'photo-path',
            buttonText: '',
            buttonCfg: {
                iconCls: 'upload-icon'
            }
}
saludos
0
@elcrespo, chingon... ahora ya puedo subir mi archivo <!-- s:D --><!-- s:D -->, felicidades, mañana subo mi solución, utilizando: struts json extjs jsp saludos desde Puebla, México
0
Hola, realice lo que Crysfel indico en un formulario sencillo, pero me sale mal el boton para cargar el archivo. Adjunto la imagen en donde se ven los errores, si alguien sabe porque ocurre esto les agradezco la ayuda.
0
creo que tu problema es que no has adjuntado a tu html los css del plugin
0
Una vez que haga lo que dice Crysfel, que más debo hacer para que funcione, es que soy nuevo en Ext y no entiendo mucho, estoy tratando de aprender con esta comunidad. Gracias.

¿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.