1. #11
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    España
    Posts
    215
    Vote Rating
    0
    vizcano is on a distinguished road

      0  

    Default


    Quote Originally Posted by vizcano View Post
    Is there a way to disable the button until the user clicks in the editable area? Just like the behavior of the standard buttons of the toolbar
    I should learn to wait for two minutes before posting anything, cause in many times i get the solution just after have posted my answer...

    Just add "disabled:true" to btn button and its done

  2. #12
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    España
    Posts
    215
    Vote Rating
    0
    vizcano is on a distinguished road

      0  

    Default


    Quote Originally Posted by vizcano View Post
    I should learn to wait for two minutes before posting anything, cause in many times i get the solution just after have posted my answer...

    Just add "disabled:true" to btn button and its done
    But only works in firefox, anyone could help me?

  3. #13
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    Ext.ux.formHtmlEditor.Picture only works in IE


  4. #14
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    España
    Posts
    215
    Vote Rating
    0
    vizcano is on a distinguished road

      0  

    Default


    Quote Originally Posted by Fabyo View Post
    Ext.ux.formHtmlEditor.Picture only works in IE

    ¿? I've got it working in both FF and IE, the only important thing i have changed is the upload method from the flash one to an uploadfile onlybutton...

    I just want to know how to disable the button at the toolbar until htmleditor is clicked, like the rest of the htmleditor toolbar items

  5. #15
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    Insert btn.disable() after line 29:

    example:

    Ext.ux.form.HtmlEditor.Picture.js

    Code:
    onRender:function()
    {
        var btn = this.cmp.getToolbar().addButton({
            iconCls: 'x-edit-picture',
            handler: function(){
                this.show();
            },
            scope: this,
            tooltip: {
                title: 'Insert Picture'
            },
            overflowText: 'Picture'
        })
        btn.disable();
    },

  6. #16
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    España
    Posts
    215
    Vote Rating
    0
    vizcano is on a distinguished road

      0  

    Default


    Thank u so much

  7. #17
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    93
    Vote Rating
    0
    Stephan Schrade is on a distinguished road

      0  

    Default


    Thank you very much for this extension.
    It works great so far.
    But unfortunately the swf upload doesn't work in FF.
    How can I perform uploads with other methods?
    Any hints?

    TIA Stephan

  8. #18
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    España
    Posts
    215
    Vote Rating
    0
    vizcano is on a distinguished road

      0  

    Default


    Well i changed the swf upload to an onlybutton fileuploadfiel, but i'm having some problems now with the new button position,because if i add to class "x-form-file-wrap" a float right property all my fileuploadfields are affected by this change, anyway i post here my solution if it helps

    Code:
    Ext.ux.InsertPictureWindow=Ext.extend(Ext.Window ,{
    	xtype:"window",
    	title:"Insertar Imagen",
    	width:430,
    	height:160,
    	layout:"fit",
    	initComponent: function(){
    		this.on_change={
    			change:{
    				scope:this,fn:function(){this.generate_code();}
    			}
    		};
    		this.buttons=[
    		{
    			xtype:'progress',
    			width:220,hidden:true
    		},
    		{
    			text:'Insertar',scope:this,
    			handler:function(){
    				if(this.callback){
    					this.callback.call(this.scope||this,this.get_code_value());
    				}
    				this.hide();
    			}
    		},{
    			text:'Cancelar',scope:this,handler:
    			function(){
    				this.hide();
    			}
    		}]
    		this.items=[
    		{
    			xtype:'form',border:false,layout:'vbox',
    			id : 'attachimg',fileUpload: true,
    			layoutConfig:{
    				align:"stretch",
    				padding:"0"
    			},
    			defaults:{
    				layout:"hbox",border:false,xtype:'panel',
    				layoutConfig:{
    					padding:"5"
    				},
    				defaults:{
    					margins:'0 5 0 0',
    					xtype:"textfield"
    				}
    			},
    			items:[
    				{
    				items:[
    					{
    						xtype:"label",
    						text:"URL:",
    						style:"line-height:22px;",
    						width:70
    					},
    					{
    						width:200,name:'src',
    						listeners:this.on_change
    					},
    					{
    						xtype:"button",
    						text:"Galeria...",scope:this,
    						handler:function(){
    							if(!this.pic_view)
    							{
    								this.pic_view = new Ext.ux.PicView({
    									url: this.downloadUrl,
    									closeAction:'hide',
    									scope:this,
    									callback:function(o){
    										var f=this.findByType('form')[0];
    										o.width+='px';o.height+='px';
    										f.form.setValues(o);
    										this.generate_code();
    									}
    								});
    							}
    							this.pic_view.show();
    						}
    					},{
    						xtype:"fileuploadfield",
    				        buttonOnly: true,
    				        buttonText: 'Examinar...',
    				        name:'file',
    				        id:'fileup',
    				        scope:this,
    				        callback:function(o){
    								var f=this.findByType('form')[0];
    								f.form.findField('src').setValue('?do=filetools.getImage&id='+o);
    								this.generate_code();
    						},
    				        listeners: {
    				            'fileselected': function(fb, v){
    				            	Ext.getCmp('attachimg').getForm().findField('src').setValue(v);
    				            	//subimos archivo
    				            	var pbar = Ext.Msg.progress('Espere unos instantes', 'cargando datos', 'actualizando datos . . .');
    				            	Ext.getCmp('attachimg').getForm().submit({
    							        url: String.format('?do=awejson.request&what={0}&which={1}', 'files', 'setImages'),
    							        waitTitle: 'Por favor, espere',
    							        waitMsg: 'espere unos instantes ...', 
    							        method: 'POST',
    							        params: {
    							            'mode' : 'new',
    							            'label': 'insertado desde editor',
    							            'description': 'insertado desde editor'
    							        },
    					            	reset: false,
    					            	failure: function(form, response) {
    					            		pbar.hide();
    					            		Ext.MessageBox.show({
    					            			title: 'Error', 
    					            			msg: response.result.message,
    					            			buttons: Ext.MessageBox.OK,
    					            			icon: Ext.MessageBox.ERROR  // Ext.MessageBox.WARNING
    					            		});
    					            	},
    					            	success: function(form, response) {
    								        	pbar.hide();
    								    		//this.generate_code();
    								        	var callback = this.callback;
    											callback.call(this.scope||this,response.result.message);
     	
    										}
    								        ,scope: this
    								    });
    				            }   
    				        }
    				  }
    				]
    			},
    			{
    				items:[
    					{
    						xtype:"label",
    						text:"Codigo:",
    						style:"line-height:22px;",
    						width:70
    					},{
    						width:320,
    						name:'code',
    						readOnly:true
    					}
    				]
    			}
    			]
    		}
    		]
    		Ext.ux.InsertPictureWindow.superclass.initComponent.call(this);
    		this.on('show',function(){
    			var f=this.findByType('form')[0];
    			f.form.reset();
    			this.generate_code();
    		},this);
    	},
    	generate_code:function(){
    		var f=this.findByType('form')[0];
    		var o = this.get_form_real_values();
    		if(typeof(o.src)!='string' || o.src.trim().length<1){
    			this.buttons[1].setDisabled(true);return;
    		}
    		this.buttons[1].setDisabled(false);
    
    		var str='<img src="'+o.src+'"'+' />';
    
    		f.form.setValues({code:str});
    	},
    	get_form_real_values:function(){
        	var form=this.findByType('form')[0].form;
        	var values = {};
    		form.items.each(function(f){
    			if('code'!=f.getName())
       				values[f.getName()] = f.getValue();
    		});
    		return values;
    	},
    	get_code_value:function(){
    		var ret=null;
        	var form=this.findByType('form')[0].form;
    		form.items.each(function(f){
    			if('code'==f.getName()){
       				var v=f.getValue();
       				if(typeof(v)=='string' && v.trim().length>0)
       					ret=v;
    			}
    		});
    		return ret;
    	}
    })

  9. #19
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    my example extjs 3.0 online:
    http://extjs.com.br/exemplos/htmleditor/

    download:
    http://extjs.com.br/exemplos/htmledi...HtmlEditor.zip

    Firefox OK

    using Ext.ux.UploadDialog, chooser.js and DataView-more.js

    * Upload image
    * Rename image
    * Delete image



  10. #20
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    93
    Vote Rating
    0
    Stephan Schrade is on a distinguished road

      0  

    Default


    Hi Fabyo,
    thanks very much.
    This works just perfect.

    Thanks,
    Stephan