How to populate combobox with data in extjs 2.3?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • vibhakhushi
    New Member
    • Mar 2010
    • 33
    #1

    How to populate combobox with data in extjs 2.3?

    Here is my code for combobox which is in FormPanel:

    Code:
    var dept_names = [
    	['1','Electronics and Communication'],
    	['2','Electrical and Electronics'],
    	['3','Telecommunication Engineering'],
    	['4','Instrumentation and Electronics Engineering']
    ];
 Code for combobox in FormPanel: 
{  
xtype:'combo',
			
			fieldLabel:'Department Name',
			
			allowBlank:false,
			
			autoShow:true,
			
			id:'department',
			
			name:'department',
			
			emptyText:'Select the Department from the List',
			
			selectOnFocus:true,
			
			forceSelection:true,
			
			resizable:true,
			
			store: new Ext.data.SimpleStore({
         		 id:0,
         		 
         		 autoLoad:true,
       			 
       			 fields:
            		[
                		'deptId',   
                		'deptName' 
            		]
            		
       			 ,data:dept_names
       			 
    			})
    				
    		,valueField:'deptId'
    		,displayField:'deptName'
    		,hiddenName:'deptId'
    		,mode:'local'

}
    When i run it i'm getting the combobox and getting emptyText also...
    But the data given in the dept_names is not getting populated :(

    Please do help me.
    Thanks in advance.
    Last edited by gits; May 7 '10, 09:53 AM. Reason: added code tags
    Tags: extjs
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      Hi,
      Here with I have attached a sample code. I created this one with Ext 2.1

      Code:
      <html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-2.1/examples/shared/examples.css" />

</head>
<body>
<div>
	Department Names: <input type="text" id="yourCombo">
 </div>
 <script type="text/javascript">

Ext.namespace('Ext.deptdata');

Ext.deptdata.dept = [['Electrionics and Communication', 'Electronics and Communication'],
        ['Electrical and Electronics', 'Electrical and Electronics'],
        ['Information technology', 'Information technology'],
        ['TeleCommunication', 'TeleCommunication']];

var combo1 = new Ext.form.ComboBox({
    store: Ext.deptdata.dept,
    displayField:'deptName',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    emptyText:'Select the Department from the List',
    selectOnFocus:true,
    applyTo: 'yourCombo'
});
</script>
</body>

</html>
      Thanks and Regards
      Ramanan Kalirajan

        Comment

        • vibhakhushi
          New Member
          • Mar 2010
          • 33
          #3
          Hello RamananKaliraja n... I tried with the example you gave me, but still i'm not getting the drop down list. I checked for store getting data, its getting. I dont know why i'm not getting the drop down list. Can you tell me where i am going wrong.

            Comment

            • RamananKalirajan
              Contributor
              • Mar 2008
              • 608
              #4
              Please check for the path and everything. Post the code what you have tried and please let us know whether are you getting any exception

              Thanks and Regards
              Ramanan Kalirajan

                Comment

                Previous template Next
                Working...