1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
    mfaisal is on a distinguished road

      0  

    Default Unanswered: Combo Box Not Working

    Unanswered: Combo Box Not Working


    i am trying to implement ComboBox but not running properly. When i use Ext.form.Select its working fine but when i use Ext.form.ComboBox its not working properly.

    var brandsSelectField = new Ext.create('Ext.form.ComboBox', {
    store: store,
    name: 'brand',
    fieldLabel: 'Select Brand',
    displayField: 'name',
    valueField: 'value',
    });


    Program not running if i use this code. Please help me.

    Regards,
    Muhammad Faisal

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    Answers
    4
    tryanDLS is on a distinguished road

      0  

    Default


    'Not working' isn't a valid problem description.

    One obvious problem is the extra comma after 'value' - run your code thru jslint.com

    http://www.sencha.com/learn/Ext_Forum_Help

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    9
    Vote Rating
    0
    keithritt is on a distinguished road

      0  

    Default


    could you include the code that populates your 'store' variable?

    also there is no renderTo or contentEl

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
    mfaisal is on a distinguished road

      0  

    Default COmbo Box Not working

    COmbo Box Not working


    Comma is mistakenly placed.. I also wrote store for result. The complete code is as well.

    Ext.regModel('BrandsData', {
    fields: [
    { name: 'name', type: 'string' },
    { name: 'value', type: 'int' }
    ]
    });

    var store = new Ext.data.JsonStore({
    model: 'BrandsData',
    method: 'GET',
    proxy: {
    type: 'ajax',
    url: linkTo + '?drpvalue=brands',
    reader: {
    type: 'json'
    }
    },
    autoLoad: true
    });

    var brandsSelectField = new Ext.create('Ext.form.ComboBox', {
    store: store,
    name: 'brand',
    fieldLabel: 'Select Brand',
    displayField: 'name',
    valueField: 'value'
    });

    what i have to given in renderTo or ContentEI property.


  5. #5
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    Answers
    3
    aacoro is on a distinguished road

      0  

    Default


    You just need somewhere to place the combobox in, so you need a panel / window:

    Code:
        var fp = new Ext.form.FormPanel({
            renderTo: Ext.getBody(),
            id: 'MyFormPanel',
            width: 400,
            height: 460,
            title: 'Testing combobox',
            frame: true,
            items: [brandsSelectField]
        });

  6. #6
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    Answers
    3
    aacoro is on a distinguished road

      0  

    Default


    placing your combobox inside the panel items, tells the combobox to renderTo the panel called fp.

    If you don't want to place the combox inside the panel, you can add:

    renderTo: Ext.getBody()
    In the api documents you can read the ComboBox class has his own renderTo. So you can place it inside your code:

    var brandsSelectField = new Ext.create('Ext.form.ComboBox', {
    store: store,
    name: 'brand',
    fieldLabel: 'Select Brand',
    displayField: 'name',
    valueField: 'value',
    renderTo: Ext.getBody()
    });
    This will render it to the HTML body.

    Instead of body you can define your own div element inside your HTML page...


    Good luck!
    Last edited by aacoro; 25 Aug 2011 at 3:19 AM. Reason: typo

  7. #7
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Vote Rating
    -1
    Answers
    8
    raz0r1 is an unknown quantity at this point

      0  

    Default


    remove the "new" then it should be fine

    Ext.define(); == "new" in Extjs4

    as someone else said, if you dont use a panel or something you have to add the renderTo-property.

    you can use the following:

    Code:
    var brandsSelectField = Ext.create('Ext.form.ComboBox', {
        renderTo: Ext.getBody(),
        store: store,
        name: 'brand',
        fieldLabel: 'Select Brand',
        displayField: 'company',
        valueField: 'price',
        }); 
        
    });
    full page example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript"><!--
    
    
    Ext.onReady(function() {
    var myData = [
                  ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
                  ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
                  ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
                  ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
                  ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
                  ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
                  ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
                  ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
                  ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
                  ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
                  ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
                  ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
                  ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
                  ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
                  ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
                  ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
                  ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
                  ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
                  ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
                  ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
                  ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
                  ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
                  ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
                  ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
                  ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
                  ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
                  ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
                  ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
                  ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
              ];
    
    
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'}
        ],
        data: myData
    });
    var brandsSelectField = Ext.create('Ext.form.ComboBox', {
    	renderTo: Ext.getBody(),
    	store: store,
    	name: 'brand',
    	fieldLabel: 'Select Brand',
    	displayField: 'company',
    	valueField: 'price',
    	}); 
    	
    });
    </script>
    </head>
    <body>
    </body>
    </html>