ExtJs Combo box issue in IE and Firefox

[shilpay]

In the chrome and safari i am getting. In Firefox and IE only i am getting an issue. When I click on combobox, the drop down shown some where at the bottom of the page. Not able to see the drop down. I am attaching the screen. Please let me know if any one have solution. I tried it so many ways...the was repeating.

[sword-it]

HI Shilpay!

May you provide your code for better understanding.

[shilpay]

Here I am attaching the file. Please find the code. when the page has scroll then only i was facing this issue.

Regards,
Shilpa.loginModule.zip

[sword-it]

Hi Shilpay,
In your code there are layout problem ,try to following code it will work fine

Ext.define('login.view.Viewport', {
    extend: 'Ext.Viewport',
    layout: 'border',
    autoScroll: true,
    initComponent: function () {
        var me = this;
        this.items = [{
            xtype: 'panel',
            width: 960,
            style: 'margin: auto',
            region: 'center',
            items: [{
                xtype: 'panel',
                items: [{
                    html: 'The ultimate HTML5 visual app builder, Sencha Architect empowers your team to design, develop, and deploy apps from a single, integrated environment. Finally, designers and developers can work in lock-step to create amazing applications.'
                }, {
                    xtype: 'panel',
                    title: 'Address',
                    layout:'hbox',
                    width: 800,
                    height: 300,
                    items: {
                        anchor: '60%',
                        xtype: 'combo',
                        name: 'country',
                        fieldLabel: 'Country',
                        displayField: 'country',
                        allowBlank: false,
                        store: 'Country',
                        value: 'United States',
                        queryMode: 'local',
                        sortOnFilter: true,
                        remoteSort: true
                    }
                }]
            }]


        }]


        me.callParent(arguments);
    }
});

[sudhavani]

 
Ext.onReady(function(){ 

/***********************************************
       * Grid
       ***********************************************/
       Ext.define('MappingObjects', {
           extend: 'Ext.data.Model',
           fields: ['employeeID','employeeName','startDate','terminationDate','rpmEmployeeID','rpmEmployeeName']
       });    
       Ext.define('RPMMappingObjects', {
           extend: 'Ext.data.Model',
           fields: ['employeeID', 'employeeName']
       });    
     
 
       var rpmEmployeeMappingStore = new Ext.data.JsonStore({    // Ext.create("Ext.data.Store", {    
           id: 'rpmEmployeeMappingStoreId',
           root:'rpmEmployees',
           fields: [{name: 'rpmEmployeeID', type: 'string'},
                     {name: 'rpmEmployeeName', type: 'string'},
                     {name: 'displayx', mapping: 'rpmEmployeeID + " - " + obj.rpmEmployeeName'}],
//           fields: [ {name: 'rpmEmployeeID', type: 'string'},
//                     {name: 'rpmEmployeeName', type: 'string'},
//                     {name: 'displayx', mapping: 'rpmEmployeeID + " - " + obj.rpmEmployeeName'}],
           mode:'local',
         //  model:'RPMMappingObjects',
          // autoLoad: true,
           data: [{rpmEmployeeID:"", rpmEmployeeName:"",displayx:""}]
           
       });
       var EmployeeMappingStore = Ext.create("Ext.data.Store", {             
           model: 'MappingObjects',
           autoLoad: false
       });


       var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',{
              clicksToEdit: 1
       });
       var rowEditing =Ext.create('Ext.grid.plugin.RowEditing', { 
           
        clicksToEdit: 1,
        autoCancel: false
    });
       var Employeegrid = new Ext.grid.Panel({
              plugins:[cellEditing],
              selModel: {
                     selType: 'cellmodel'
              } , 
              
           id: 'employeeGridPanelId',
           store: EmployeeMappingStore,
           renderTo: 'employeeGrid',
           title: 'Employee Mapping',      
           width: 800,      
           height: 600,
           layout: 'fit',
           cls: 'grid',
           columns: [
               { header: "TAMS II Employee",
                   width: 170,
                   sortable: true,
                   dataIndex: 'employeeID',
                   flex: 1
                  
               },
               { header: "Employee Name",
                   width: 160,
                   sortable: true,
                   dataIndex: 'employeeName',
                   flex: 2
                    
               },
               { header: "Start Date",
                   width: 170,
                   sortable: true,
                   dataIndex: 'startDate',                
                   flex: 3
                    
               },
               { header: "Termination Date",
                   width: 170,
                   sortable: true,
                   dataIndex: 'terminationDate',                   
                   flex: 4
                    
               },
               {header: 'RPM Site',
                   dataIndex: 'rpmEmployeeID',
                     width: 140,
                     renderer: function(value, meta, record){
                         if(value != null && value != undefined) {
                            var fname = record.data.rpmEmployeeID + " " + record.data.rpmEmployeeName;
                            return fname;
                         } else {
                             return "";
                         }
                        },
               
                     editor: {
                          xtype: 'combobox',
                          typeAhead: true,
                          triggerAction: 'all',
                          selectOnTab: true,
                          queryMode: 'local',
                          mode:'local',
                          displayField:'displayx',
                          valueField:'rpmEmployeeID',
                          store: rpmEmployeeMappingStore,
                          lazyRender: false,
                          listClass: 'x-combo-list-small'
                      }
                     
               }

               
               
           ]
          
          
       });
       
                
       Ext.Ajax.request({
              url : 'employees.json',
              params: {
              storeNumber: getStoreNumber() 
        },
           success: function(response, opts) {
              responseObj = Ext.JSON.decode(response.responseText);
              for(var i= 0; i < responseObj.employees.length; i++) {
                  if(responseObj.employees.rpmEmployeeID != "") {
                      for(var x = 0; x < responseObj.rpm_Employees.length; x++) {
                          if(responseObj.rpm_Employees[x].rpmEmployeeID == responseObj.employees[i].rpmEmployeeID) {
                              responseObj.employees[i].rpmEmployeeName = responseObj.rpm_Employees[x].rpmEmployeeName;
                              break;
                          }
                      }
                  }
              }
              
              Ext.getCmp('employeeGridPanelId').getStore().loadData(responseObj.employees);
              var pleaseSelectRecord = Ext.create('RPMMappingObjects', {
                  rpmEmployeeID : '-2',
                  rpmEmployeeName  : 'Please Select'
                });
              
             //  rpmEmployeeMappingStore.on('load', setComboValues(responseObj), this, {single:true});
             
               rpmEmployeeMappingStore.loadData(responseObj.rpm_Employees);
               rpmEmployeeMappingStore.insert(0, pleaseSelectRecord);
     
           },
           failure: function(response, opts) {
             
        }
       });
       
       function saveChangedRPMEmployees() {
           var storeID = Ext.get("storeNum").getValue();
           var mySelections = new Array();
              Ext.getCmp('employeeGridPanelId').getStore().each(
                   function(record) {
                       if(record.get('rpmEmployeeID') != null && record.get('rpmEmployeeID') != "") {
                           employeeId = record.get('employeeID');
                           rpmEmpId = record.get('rpmEmployeeID');
                           var myObj = {
                                   "TAMSIIEmpID": employeeId,
                                   "RPMEmpID": rpmEmpId                                            
                           };
                               mySelections.push(myObj);
                       }
                   }
               );
              
          //     console.log(mySelections);
               var obj = {storeNumber: storeID, mapping:mySelections};
               var postBody = Ext.JSON.encode(obj);
            Ext.Ajax.request({
                    url : 'saveEmployeeMapping.json',
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    jsonData: {
                           "mapping" : mySelections,
                           "storeNumber" : storeID
                                                     
                                },
                    success: function (response) {
                   //     Ext.getCmp('employeeGridPanelId').getStore().commitChanges();
                        console.log(response);
                                },
                    failure: function (response) {
                        console.log(response);
                              }
                  });
       }
       
        
});

I am having issue with diplay of values in combo box. I want to show rpmEmployeeID + " - " + rpmEmployeeName inside combo box, so I declared displayx in the field and I used displayx as as display value in the combo box. I amgetting empty strings in combo box. If I change display value to rpmEmployeeName it works. But I edit combo box it is getting messed up. Any help is apprecaited.

[sencha-man]

i have this exact same issue! did you find a cause/solution to this?