Results 1 to 7 of 7

Thread: marquee conflict with extjs form

  1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    27

    Default marquee conflict with extjs form

    Hi,

    I have created a contact form using extjs, it works fine.

    However, I need to insert the image marquee as in the code below.

    Code:
    function startmarquee() {
       new mq('m1',mqAry1,90);
       mqRotate(mqr); // must come last
    }
    
    window.onload = startmarquee
    
    var mqr = []; 
    function mq(id1,ary,wid){
    	this.mqo=document.getElementById(id1); 
    	var heit = this.mqo.style.height; 
    	this.mqo.onmouseout=function() {
    		mqRotate(mqr);
    	}; 
    	this.mqo.onmouseover=function() {
    		clearTimeout(mqr[0].TO);
    	}; 
    	this.mqo.ary=[]; 
    	var maxw = ary.length; 
    	for (var i=0;i<maxw;i++){
    		this.mqo.ary[i]=document.createElement('img'); 
    		this.mqo.ary[i].src=ary[i]; 
    		this.mqo.ary[i].style.position = 'absolute'; 
    		this.mqo.ary[i].style.left = (wid*i)+'px'; 
    		this.mqo.ary[i].style.width = wid+'px'; 
    		this.mqo.ary[i].style.height = heit; 
    		this.mqo.appendChild(this.mqo.ary[i]);
    	} 
    	mqr.push(this.mqo);
    } 
    
    function mqRotate(mqr){
    	if (!mqr) return; 
    	for (var j=mqr.length - 1; j > -1; j--) {
    		maxa = mqr[j].ary.length; 
    		for (var i=0;i<maxa;i++){
    			var x = mqr[j].ary[i].style;  
    			x.left=(parseInt(x.left,10)-1)+'px';
    		} 
    		var y = mqr[j].ary[0].style; 
    		if (parseInt(y.left,10)+parseInt(y.width,10)<0) {
    			var z = mqr[j].ary.shift(); 
    			z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; 
    			mqr[j].ary.push(z);
    		}
    	} 
    	mqr[0].TO=setTimeout('mqRotate(mqr)',10);
    }
    then, the form disappear, only the marquee working. I tried to search around but no result . Can anyone help me on this issue? Appreciate very much.

  2. #2
    Sencha User
    Join Date
    Oct 2007
    Posts
    27

    Default

    Anyone, please help ?!?

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Your class which you do not provide code for interferes with existing Ext markup? How can anyone possibly help?

  4. #4
    Sencha User
    Join Date
    Oct 2007
    Posts
    27

    Default

    Hi Animal,

    for Ext, the code is quite straight forward as follow

    Code:
        Ext.QuickTips.init();
    
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';
    
        var simple = new Ext.FormPanel({
            labelWidth: 100, // label settings here cascade unless overridden
            frame:true,
            width: 550,
    		fileUpload: true,
    		isUpload: true,		
            defaults: {width: 400},
            defaultType: 'textfield',
    		keys: [{ key: Ext.EventObject.ENTER, fn: onSubmit }],
    
    		items: [new Ext.form.ComboBox ({
    					store: new Ext.data.SimpleStore({fields: ['department'], data: departmentdata}),
    					fieldLabel: depart_label,
    					name: 'department',					
    					allowBlank:false,
    					displayField:'department',
    					typeAhead: true,
    					mode: 'local',
    					triggerAction: 'all',
    					emptyText:depart_emptytext,
    					value:'',
    					selectOnFocus:true
    			}),{
    					name          : 'name',
    					allowBlank    : false,
    					value		  : '',
    					fieldLabel    : name_label
    			},{
    					name          : 'address',
    					fieldLabel    : address_label
    			},{
    					name          : 'tel',
    					fieldLabel    : tel_label
    			},{
    					name          : 'fax',
    					fieldLabel    : 'Fax'
    			},{
    					name          : 'email',
    					allowBlank	  : false,
    					value		  : '',
    					fieldLabel    : 'Email'
    			},{
    					name          : 'title',
    					allowBlank    : false,
    					value		  : '',
    					fieldLabel    : title_label
    			}
    			,{
    				    type		  : 'textarea',
    					name          : 'des',
    					allowBlank	  : false,
    					value		  : '',
    					fieldLabel    : content_label,
    					height        : 100
    			}
            ],
            buttons: [{
                text: sendbutton,
                handler: onSubmit
    		},{
    			text: clearbutton,
    			handler: function(){
    				simple.getForm().reset();
    			}
    		}]
        });
    
     	function onSubmit(){
                    if(simple.getForm().isValid()){
    	                simple.getForm().submit({
    						waitTitle: waittitle,
    	                    waitMsg: progress,
    						url: linkurl,
    						method: 'post',
    						enctype:'multipart/form-data',
    						success:function(){ 
                            	Ext.Msg.alert(status, message, function(btn, text){
    								if (btn == 'ok'){
    									window.location = weburl+"admin/news";
    								}
    			        		});
                            },
                            failure:function(form, action){ 
                                if(action.failureType   == 'server'){ 
                                    obj = Ext.util.JSON.decode(action.response.responseText); 
                                    Ext.Msg.alert(loi, obj.errors.reason); 
    								
                                }else{ 
                                    Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
                                } 
                            } 
    	                });
                    }
                };        
    
        simple.render("contactform");
    and I have two div in the page as follow:

    Code:
    <div id="contactform"></div> //this is for the form
    <div id="m1" class="marquee"></div> //this is for the marquee images
    You can see it in the following link:
    http://philance.com.vn/projects/suoitien/index/contact

    Hope to hearing from you soon.

  5. #5
    Sencha User
    Join Date
    Oct 2007
    Posts
    27

    Default

    a bit more, when you use firefox to see the link, you will see the form only, but when you use IE, you will see the marquee images only ... strange is it?

  6. #6
    Sencha User
    Join Date
    Oct 2007
    Posts
    27

    Default

    any help ?

  7. #7
    Sencha User
    Join Date
    Oct 2007
    Posts
    27

    Default

    Solved. Thx anyway.

Posting Permissions

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