1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    0
    jovasnimaro is on a distinguished road

      0  

    Default ComboBox problem

    ComboBox problem


    Hi, i have a problem with my combobox, i'm using beforequery event, when the length is equal 5 execute a webservice to fill the store, but it shows the dropdown list in the center of the screnn.

    dropdownlist.png

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,069
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please specify the version of Ext4 that you are using. Several older versions suffered from this problem.

    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    0
    jovasnimaro is on a distinguished road

      0  

    Default


    Hi Scott, i'm using ExtJs 4.1.1

    Regards

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,069
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    It should not be a problem in 4.1.1

    Are you able to provide a working test case for us? If you have static data, does happen as well?

    Scott.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    0
    jovasnimaro is on a distinguished road

      0  

    Default


    here is my code, let me try using static data.

    Code:
    var addewr = Ext.create( 'Ext.form.Panel',{
    	alias: 'widget.addewr',
    	title: 'Add EWR',
    	border: false,
    	items:[
    	{
    		xtype: 'form',
    		border: false,
    		layout: 'column',
    		defaults: {
    			bodyPadding: 20
    		},
    		items: [
    		{
    			xtype: 'form',
    			border: false,
    			items:[
    			{
    				xtype: 'combobox',
    				fieldLabel: 'Project number',
    				//name: 'projectnumber',
    				id: 'projectnumber',
    				store: projectautostore,
    				displayField: 'projectid',
    				valueField: 'projectid',
    				minChars: 5,
    				width: 350,
    				listeners: {
    					specialkey: function(field, e)
    					{
    						if (e.getKey() == e.ENTER)
    						{
    							projectquery=this.getValue();
    							if (projectquery.length == 8){
    
    
    								Ext.Ajax.request({
    									url: appRoot + '/rest/ewr/getProject?projectid=' + Ext.getCmp('projectnumber').getValue(),
    									success: function(response, opts) {
    
    
    										projectjson = JSON.parse(response.responseText);
    										Ext.getCmp('projectname').setValue(projectjson.name);
    										if(projectjson.pyear != 'null'){
    											Ext.getCmp('modelyear').show();
    											Ext.getCmp('modelyear1').hide();
    											Ext.getCmp('modelyear').setValue(projectjson.pyear);
    											modelyearfield = 0;
    										}else{
    											Ext.getCmp('modelyear1').show();
    											Ext.getCmp('modelyear').hide();
    											Ext.getCmp('modelyear1').setValue("");
    											modelyearfield = 1;
    										}
    
    
    										Ext.getCmp('customer').setValue(projectjson.customerid.name);
    										Ext.getCmp('pbu').setValue(projectjson.productlineid.productbusinessunitid.name);
    										Ext.getCmp('productline').setValue(projectjson.productlineid.name);
    										projectid = projectjson.projectid;
    										Ext.getCmp('workordercombo').clearValue();
    										projectid = Ext.getCmp('projectnumber').getValue();
    
    
    										workorderstore.getProxy().url = appRoot + '/rest/ewr/getWorkOrder?projectid=' + projectid;
    										workorderstore.load();
    
    
    									},
    									failure: function(response, opts) {
    									//console.log('server-side failure with status code ' + response.status);
    									}
    								});
    
    
    							}
    						}
    					}
    					,
    					'beforequery': function (queryEvent) {
    						projectquery = queryEvent.combo.getValue();
    						//console.log(projectquery.length);
    						if (projectquery.length >= 5) {
    							projectautostore.removeAll()
    							projectautostore.getProxy().url =appRoot + '/rest/ewr/autocompleteProject?projectid=' + projectquery;
    							projectautostore.load();
    						}
    					}
    					,
    					'select': function(){
    						Ext.Ajax.request({
    							url: appRoot + '/rest/ewr/getProject?projectid=' + Ext.getCmp('projectnumber').getValue(),
    							success: function(response, opts) {
    
    
    								projectjson = JSON.parse(response.responseText);
    								Ext.getCmp('projectname').setValue(projectjson.name);
    								if(projectjson.pyear != 'null'){
    									Ext.getCmp('modelyear').show();
    									Ext.getCmp('modelyear1').hide();
    									Ext.getCmp('modelyear').setValue(projectjson.pyear);
    									modelyearfield = 0;
    								}else{
    									Ext.getCmp('modelyear1').show();
    									Ext.getCmp('modelyear').hide();
    									Ext.getCmp('modelyear1').setValue("");
    									modelyearfield = 1;
    								}
    
    
    								Ext.getCmp('customer').setValue(projectjson.customerid.name);
    								Ext.getCmp('pbu').setValue(projectjson.productlineid.productbusinessunitid.name);
    								Ext.getCmp('productline').setValue(projectjson.productlineid.name);
    								projectid = projectjson.projectid;
    								Ext.getCmp('workordercombo').clearValue();
    								projectid = Ext.getCmp('projectnumber').getValue();
    
    
    								workorderstore.getProxy().url = appRoot + '/rest/ewr/getWorkOrder?projectid=' + projectid;
    								workorderstore.load();
    
    
    							},
    							failure: function(response, opts) {
    							//console.log('server-side failure with status code ' + response.status);
    							}
    						});
    					}	,
    					'change': function(){
    						Ext.getCmp('customer').setValue('');
    						Ext.getCmp('productline').setValue('');
    						Ext.getCmp('modelyear').setValue('');
    						Ext.getCmp('modelyear').show();
    						Ext.getCmp('modelyear1').hide();
    						Ext.getCmp('projectname').setValue('');
    					}
    				}
    			},{
    				xtype: 'displayfield',
    				fieldLabel: 'Project name',
    				name: 'projectName',
    				id: 'projectname',
    				readOnly: true,
    				width: 350
    			},{
    				xtype: 'displayfield',
    				fieldLabel: 'Customer',
    				name: 'customer',
    				id: 'customer',
    				readOnly: true,
    				width: 350
    			},{
    				xtype: 'displayfield',
    				fieldLabel: 'Model year',
    				name: 'modelyear',
    				id: 'modelyear',
    				vtype: 'year',
    				maxLength: '4',
    				minLength: '4',
    				width: 350
    			},{
    				xtype: 'textfield',
    				fieldLabel: 'Model year',
    				name: 'modelyear1',
    				id: 'modelyear1',
    				vtype: 'year',
    				maxLength: '4',
    				minLength: '4',
    				hidden: true,
    				width: 350
    			},{
    				xtype: 'displayfield',
    				fieldLabel: 'PBU',
    				name: 'pbu',
    				id: 'pbu',
    				readOnly: true,
    				width: 350
    			},{
    				xtype: 'displayfield',
    				fieldLabel: 'Product line',
    				name: 'productline',
    				id: 'productline',
    				readOnly: true,
    				width: 350
    			}
    			]
    		},
    		{
    			xtype:'form',
    			width: '500',
    			border: false,
    			items: [
    			{
    				xtype: 'displayfield',
    				fieldLabel: 'Creation Date',
    				name: 'creationdate',
    				id: 'creationdate',
    				allowBlank: false,
    				width: 350
    			},
    			{
    				xtype: 'datefield',
    				fieldLabel: 'Completion Date',
    				name: 'completationdate',
    				id: 'completationdate',
    				allowBlank: false,
    				width: 350,
    				editable: false,
    				listeners: {
    					'select': function(){
    						Ext.getCmp('partsarrivaldate').setMaxValue(Ext.getCmp('completationdate').getValue());
    					},
    					'change': function(){
    						Ext.getCmp('partsarrivaldate').setValue('');
    						Ext.getCmp('partsarrivaldate').setMaxValue(Ext.getCmp('completationdate').getValue());
    					}
    				}
    			},
    			{
    				xtype: 'datefield',
    				fieldLabel: 'Parts Arrival Date',
    				name: 'partsarrivaldate',
    				id: 'partsarrivaldate',
    				minValue: new Date(),
    				allowBlank: false,
    				width: 350,
    				editable: false,
    				listeners:{
    
    
    			}
    			},
    			{
    				//add combobox Select Validation phase
    				xtype: 'combobox',
    				name: 'typecombo',
    				id: 'typecombo',
    				fieldLabel: 'EWR Type',
    				editable: false,
    				store: typestore,
    				displayField: 'name',
    				valueField: 'ewrtypeid',
    				width: 350,
    				listeners: {
    					'select': function(){
    						Ext.getCmp('phasecombo').clearValue();
    						phasestore.getProxy().url = appRoot + '/rest/ewr/getEwrPhase?ewrtypeid=' + Ext.getCmp('typecombo').getValue();
    						phasestore.load();
    					//
    					//console.log(Ext.getCmp('modelyear').getValue());
    					//console.log(yearTest.test(Ext.getCmp('modelyear').getValue()));
    					},
    					'change': function(){
    						Ext.getCmp('phasecombo').clearValue();
    						phasestore.getProxy().url = appRoot + '/rest/ewr/getEwrPhase?ewrtypeid=' + Ext.getCmp('typecombo').getValue();
    						phasestore.load();
    					}
    				}
    			},
    			{
    				//add combobox Select Verification Purpose
    				xtype: 'combobox',
    				name: 'phasecombo',
    				id: 'phasecombo',
    				fieldLabel: 'EWR Phase',
    				editable: false,
    				store: phasestore,
    				displayField: 'name',
    				valueField: 'ewrphaseid',
    				//allowBlank: false,
    				width: 350
    			},
    
    
    
    
    			{
    				//add the combobox Work Ordern Number
    				xtype: 'combobox',
    				name: 'workordercombo',
    				id: 'workordercombo',
    				editable: false,
    				store: workorderstore,
    				displayField: 'name',
    				valueField: 'workorderid',
    				margin: '0,0,0,0',
    				fieldLabel: 'Work Order No',
    				width: 350
    			},
    			{
    				xtype:'textarea',
    				fieldLabel : 'Comments',
    				name       : 'comments',
    				id: 'comments',
    				margin: '0,0,0,0',
    				width: 350,
    				height: 50
    			},
    
    
    			{
    				//add the buttons to save and cancel
    				xtype:'form',
    				margin: '20,0,0,0',
    				width: 335,
    				buttonAlign: 'right',
    				border: false,
    				buttons: [{
    					text: 'Save',
    					handler: function() {
    
    
    						if(modelyearfield == 0){
    							modelyearfield = Ext.getCmp('modelyear').getValue();
    						//console.log(modelyearfield);
    						}else{
    							modelyearfield = Ext.getCmp('modelyear1').getValue();
    						//console.log(modelyearfield);
    						}
    
    
    						var isValidForm = this.up('form').getForm().isValid();
    
    
    						if (isValidForm == true) {
    							// function to validate
    
    
    							function ISODateString(d){
    								function pad(n){
    									return n<10 ? '0'+n : n
    								}
    								return d.getUTCFullYear()+'-'
    								+ pad(d.getUTCMonth()+1)+'-'
    								+ pad(d.getUTCDate())+'T'
    								+ pad(d.getUTCHours())+':'
    								+ pad(d.getUTCMinutes())+':'
    								+ pad(d.getUTCSeconds())+'Z'
    							}
    
    
    
    
    
    
    							var partsarrivaldateiso = ISODateString(Ext.getCmp('partsarrivaldate').getValue());
    							var completedateiso = ISODateString(Ext.getCmp('completationdate').getValue());
    							var creationdateiso = ISODateString(new Date());
    
    
    							stringjson =
    							{
    								"archivedate":null,
    								"closedate":null,
    								"completedate": completedateiso,
    								"creationdate": null,
    								"ewrid":null,
    								"ewrphaseid":{
    									"ewrphaseid": Ext.getCmp('phasecombo').getValue(),
    									"ewrtypeid":{
    										"ewrtypeid": Ext.getCmp('typecombo').getValue(),
    										"name":null
    									},
    									"name":null
    								},
    								"ewrstatusid":{
    									"ewrstatusid":"1",
    									"name":null
    								},
    								"modelyear": modelyearfield,
    								"parentewrid":null,
    								"partsarrivaldate": partsarrivaldateiso,
    								"siteid":{
    									"acronym":null,
    									"name": null,
    									"siteid": usersitejson.user.siteid.siteid
    								},
    								"userid":{
    									"active":null,
    									"mail":null,
    									"name":null,
    									"siteid": {
    										"acronym": null,
    										"name": null,
    										"siteid": usersitejson.user.siteid.siteid
    									},
    									"supervisor": null,
    									"userid": userjson.userid
    								},
    								"validationlevel":"1",
    								"workorderid":{
    									"name":null,
    									"projectid":{
    										"customerid":{
    											"cnumber":null,
    											"customerid": projectjson.customerid.customerid,
    											"name":null
    										},
    										"name":null,
    										"productline":null,
    										"projectid":Ext.getCmp('projectnumber').getValue(),
    										"pyear":null
    									},
    									"workorderid": Ext.getCmp('workordercombo').getValue()
    								},
    								"comments": Ext.getCmp('comments').getValue()
    
    
    							}
    
    
    							Ext.Ajax.request({
    								url: appRoot + '/rest/ewr/save',// where you wanna post
    								headers: {
    									'Content-Type' : 'application/json'
    								},
    								method:"POST",
    								success: function(response, opts) {
    									Ext.Msg.show({
    										title:'Add EWR',
    										msg: "EWR saved succesfully!",
    										buttons: Ext.Msg.OK,
    										icon: Ext.Msg.INFO,
    										fn:function(btn){
    											if(btn=='ok'){
    												parent.contentPanel.setSrc(appRoot + "/app/controller/ewr/myewrs.jsp");
    											}
    										}
    									});
    								},
    								failure: function(response, opts) {
    								//console.log('server-side failure with status code ' + response.status);
    								},
    								jsonData: stringjson
    							});
    						}
    					}
    				},{
    					text: 'Cancel',
    					handler: function() {
    						Ext.Msg.show({
    							title:'Cancel EWR?',
    							msg: "Are you sure to cancel the EWR?",
    							buttons: Ext.Msg.YESNO,
    							icon: Ext.Msg.QUESTION,
    							fn:function(btn){
    								if(btn=='yes'){
    									parent.contentPanel.setSrc(appRoot + "/app/controller/ewr/myewrs.jsp");
    								}
    							}
    						});
    					}
    				}],
    				isValid: function()
    				{
    					// validate the projectnumber field
    
    
    					if (Ext.getCmp('projectnumber').getValue()== null){
    						Ext.Msg.show({
    							msg: "Please fill the Project Number field",
    							buttons: Ext.Msg.OK,
    							icon: Ext.Msg.WARNING
    						});
    						return false;
    					}
    
    
    
    
    
    
    					// validate the modelyear field
    					if (Ext.getCmp('modelyear1').getValue()=='' && Ext.getCmp('modelyear1').isVisible()){
    						Ext.Msg.show({
    							msg: "Please fill the Model Year field",
    							buttons: Ext.Msg.OK,
    							icon: Ext.Msg.WARNING
    						});
    						return false;
    					}
    
    
    					// validate the completationdate field
    
    
    					if (Ext.getCmp('completationdate').getValue()==null){
    						Ext.Msg.show({
    							msg: "Please select the Completation Date",
    							buttons: Ext.Msg.OK,
    							icon: Ext.Msg.WARNING
    						});
    						return false;
    					}
    					// validate the partsarrivaldate field
    
    
    					if (Ext.getCmp('partsarrivaldate').getValue()==null){
    						Ext.Msg.show({
    							msg: "Please select the Parts Arrival Date",
    							buttons: Ext.Msg.OK,
    							icon: Ext.Msg.WARNING
    						});
    						return false;
    					}
    
    
    					// validate the typecombo field
    
    
    					if (Ext.getCmp('typecombo').getValue()==null){
    						Ext.Msg.show({
    							msg: "Please select the EWR Type",
    							buttons: Ext.Msg.OK,
    							icon: Ext.Msg.WARNING
    						});
    						return false;
    					}
    
    
    					// validate the phasecombo field
    					if (Ext.getCmp('phasecombo').getValue()==null){
    						Ext.Msg.show({
    							msg: "Please select the EWR Phase",
    							buttons: Ext.Msg.OK,
    							icon: Ext.Msg.WARNING
    						});
    						return false;
    					}
    
    
    					// validate the workordercombo field
    					if (Ext.getCmp('workordercombo').getValue()==null){
    						Ext.Msg.show({
    							msg: "Please select the Work Order No",
    							buttons: Ext.Msg.OK,
    							icon: Ext.Msg.WARNING
    						});
    						return false;
    					}
    
    
    					return true;
    				}
    			}
    			]
    		}]
    	}]
    });

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    0
    jovasnimaro is on a distinguished road

      0  

    Default


    Solved

    Hi Scott,

    I solved disabling the loadmask, at the moment when is calling the webservice the loadmask appear in the center of the screen making the dropdown list stay in the center.

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,069
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Good to know. Thank you for the update.

    Scott.

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    1
    Vote Rating
    0
    rware88 is on a distinguished road

      0  

    Default


    I'm seeing this same issue in IE8 only. Tested so far with Ext 4.1.2a and 4.2.1 - same problem in both.

    As mentioned above, adding this to the ComboBox config fixes it, but at the cost of having no loadmask in IE8:

    Code:
    listConfig: {
        loadMask: !Ext.isIE8
    }
    If anyone has a better solution please share.