1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Hyderabad
    Posts
    27
    Vote Rating
    2
    shilpay is on a distinguished road

      1  

    Default ExtJs Combo box issue in IE and Firefox

    ExtJs Combo box issue in IE and Firefox


    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.
    Attached Images

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    HI Shilpay!

    May you provide your code for better understanding.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Location
    Hyderabad
    Posts
    27
    Vote Rating
    2
    shilpay is on a distinguished road

      0  

    Default Hi sword

    Hi sword


    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

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi Shilpay,
    In your code there are layout problem ,try to following code it will work fine
    Code:
    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);
        }
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    16
    Vote Rating
    0
    sudhavani is on a distinguished road

      0  

    Default Combo box display value problem

    Combo box display value problem


    Code:
     
    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.

  6. #6
    Sencha User
    Join Date
    Sep 2014
    Posts
    1
    Vote Rating
    0
    sencha-man is on a distinguished road

      0  

    Default


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