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
    8,918
    Vote Rating
    443
    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
    8,918
    Vote Rating
    443
    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
    8,918
    Vote Rating
    443
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi