Results 1 to 4 of 4

Thread: IconCombo in a Grid

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Phoenix, AZ
    Vote Rating

    Default IconCombo in a Grid

    Has anyone used the iconcombo ux that Saki wrote as an editor for a grid column? If so, were you able to get the icon to display in the grid without the editor/combo being activated?

    Last edited by mystix; 9 Jul 2009 at 10:50 PM. Reason: moved to 3.x Help from 3.x Ux and Plugins

  2. #2
    Sencha User's Avatar
    Join Date
    Mar 2007
    DC Area =)
    Vote Rating


    you should setup a custom renderer for that column

  3. #3
    Ext User
    Join Date
    Jan 2010
    Vote Rating

    Question I ran into same problem

    I have checked posts about IconCombo and grid, not found the exact answer for putting IconCombo into grid. What I got is a text column showing the "valueField", no icons and drop-down list.

    Below is the code, modified from example:
     * Ext JS Library 2.3.0
     * Copyright(c) 2006-2009, Ext JS, LLC.
        var xg = Ext.grid;
        // shared reader
        var reader = new{}, [
           {name: 'company'},
        	 {name: 'action', type: 'string'},
        	 {name:'qtip', type: 'string'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
           {name: 'industry'},
           {name: 'desc'}
        // Grid 1
        // row expander
    /*    var expander = new xg.RowExpander({
            tpl : new Ext.Template(
                '<p><b>Company:</b> {company}</p><br>',
                '<p><b>Summary:</b> {desc}</p>'
        }); */
       var expander = new Ext.grid.RowExpander({
    		    	remoteDataMethod : loadRow
    /*   var cellActions = new Ext.ux.grid.CellActions({
    				action:function(grid, record, action, value) {
    //					Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
    				,beforeaction:function() {
    //					Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
    				'icon-undo':function(grid, record, action, value) {
    //					Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
    		});	*/
       var iconCom = new Ext.ux.IconCombo({
    	            displayField: 'countryName',	
    		      valueField: 'countryCode',
    	            iconClsField: 'countryFlag',		      
    	            store: new{
    	                    fields: ['countryCode', 'countryName', 'countryFlag'],
    	                    data: [
    	                        ['US', 'United States', 'ux-flag-us'],
    	                        ['GE', 'Germany', 'ux-flag-de'],
    	                        ['FR', 'France', 'ux-flag-fr']
    	            triggerAction: 'all',
    	            mode: 'local',
    	            listeners: {
    	            		scope: this,
    	            		render:function() {
    						alert('IconCombo alert!');
        var grid1 = new xg.EditorGridPanel({
            store: new{
                reader: reader,
                data: xg.dummyData
            cm: new xg.ColumnModel([
                {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
    //            {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
    //            {header: "Status", width: 8, sortable: true, dataIndex: 'change', cellActions:[{
    //						 iconIndex:'action'
    //						,qtipIndex:'qtip'}]},   
    	      {header: "Country", width: 8, sortable: true, dataIndex: 'action',
    		   editor: iconCom},
                {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            viewConfig: {
            width: 600,
            height: 300,
    //        plugins: [expander,cellActions],
            plugins: [expander],
            collapsible: true,
            animCollapse: false,
            title: 'Expander Rows, Collapse and Force Fit',
            iconCls: 'icon-grid',
            renderTo: document.body
    var loadRow = function(record, index) {
    	alert(record + ", " + index);
       var xg = Ext.grid;
    /*    var blreader = new{}, [
           {name: 'id'},
           {name: 'type'},
           {name: 'theoQty'},
           {name: 'theoQtyValue', type: 'float'},
           {name: 'settledQty'},
           {name: 'settledQtyValue', type: 'float'}
        var blstore = new{
            reader: blreader,
            data: xg.dummyData2
        }); */
        var blstore = new{
        	 id: 'chamber-store',
    	 proxy: new ({
    	    		url: 'echo.php',
    	    		method: 'POST'
    	 baseParams:{p: "One"	}, 	
        		exception: function(dataProxy, type, action, options, response, args) {
                    var initData = Ext.util.JSON.decode(response.responseText);
                         Ext.Msg.alert("Error", initData.error);
                         return false;
        		load: function () {
    //    			alert('chamber grid load complete!');
           reader: new{
           	root: 'results', 
                 idProperty: 'id', 
                 fields:  	[
                 	{name: 'chamberName'}, 
                 	{name: 'building'}, 
                 	{name: 'usage', type: 'float'}
        var blgrid = new xg.GridPanel({
            ds: blstore,
            cm: new xg.ColumnModel([
                {header: "Name", width: 200, sortable: true, dataIndex: 'chamberName'},
                {header: "Building", width: 80, sortable: true, dataIndex: 'building'},
                {header: "Usage", width: 80, sortable: true, dataIndex: 'usage'}
            viewConfig: {
            disableSelection : false,
            hideHeaders: false,
            autoHeight: true,
            collapsible: false,
            disableSelection : true,
            enableHdMenu : false,
            trackMouseOver : false,
            autoSizeColumns: true
    // Array data for the grids
    Ext.grid.dummyData = [
        ['3m Co',"US", "send email", 71.72,'',0.03,'9/1 12:00am', 'Manufacturing'],
        ['Alcoa Inc',"US", "send email",29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
        ['Altria Group Inc',"GE", "add email",83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
        ['American Express Company',"US", "send email",52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
        ['American International Group, Inc.',"US", "send email",64.13,0.31,0.49,'9/1 12:00am', 'Services'],
        ['AT&T Inc.',"US", "send email",31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
        ['Boeing Co.',"US", "send email",75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
        ['Caterpillar Inc.',"US", "send email",67.27,0.92,1.39,'9/1 12:00am', 'Services'],
        ['Citigroup, Inc.',"US", "send email",49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
        ['E.I. du Pont de Nemours and Company',"US", "send email",40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
        ['Exxon Mobil Corp',"US", "send email",68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
        ['General Electric Company',"US", "send email",34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
        ['General Motors Corporation',"US", "send email",30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
        ['Hewlett-Packard Co.',"US", "send email",36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
        ['Honeywell Intl Inc',"US", "send email",38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
        ['Intel Corporation',"US", "send email",19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
        ['International Business Machines',"US", "send email",81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
        ['Johnson & Johnson',"US", "send email",64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
        ['JP Morgan & Chase & Co',"FR", "send email",45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
        ['McDonald\'s Corporation',"US", "send email",36.76,0.86,2.40,'9/1 12:00am', 'Food'],
        ['Merck & Co., Inc.',"FR", "send email",40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
        ['Microsoft Corporation',"US", "send email",25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
        ['Pfizer Inc',"US", "send email",27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
        ['The Coca-Cola Company',"US", "send email",45.07,0.26,0.58,'9/1 12:00am', 'Food'],
        ['The Home Depot, Inc.',"US", "send email",34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
        ['The Procter & Gamble Company',"FR", "send email",61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
        ['United Technologies Corporation',"US", "send email",63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
        ['Verizon Communications',"GE", "send email",35.57,0.39,1.11,'9/1 12:00am', 'Services'],
        ['Wal-Mart Stores, Inc.',"US", "send email",45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
        ['Walt Disney Company (The) (Holding Company)',"US", "send email",29.89,0.24,0.81,'9/1 12:00am', 'Services']
    Ext.grid.dummyData2 = [
        [1, '3m Co',71.72,0.02, 'Manufacturing',0.03],
        [2, 'Alcoa Inc',71.72,0.02, 'Manufacturing',0.03],    
        [3, 'Altria Group Inc',71.72,0.02, 'Manufacturing',0.03],
        [4, 'American Express Company',71.72,0.02, 'Manufacturing',0.03]    
    // add in some dummy descriptions
    for(var i = 0; i < Ext.grid.dummyData.length; i++){
        Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
    Code for html file:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Grid3 Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="Ext.ux.grid.CellActions.css" />
        <!-- GC -->
     	<!-- LIBS -->
     	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     	<!-- ENDLIBS -->
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript" src="gridRowExpander.js"></script>
    <!--    <script type="text/javascript" src="Ext.ux.grid.CellActions.js"></script> -->
        <script type="text/javascript" src="grid-icon.js"></script>    
        <link rel="stylesheet" type="text/css" href="grid-examples.css" />
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
        <script type="text/javascript" src="Ext.ux.IconCombo.js"></script>
        <style type="text/css">
        .ux-flag-us {
            background-image:url(../shared/icons/fam/grid.png) ! important;
        .ux-flag-de {
            background-image:url(../shared/icons/fam/add.gif) ! important;
        .ux-flag-fr {
            background-image:url(../shared/icons/fam/plugin.gif) ! important;
        	 width: 100px;
        .ux-icon-combo-icon {
            background-repeat: no-repeat;
            background-position: 0 50%;
            width: 18px;
            height: 14px;
        /* X-BROWSER-WARNING: this is not being honored by Safari */
        .ux-icon-combo-input {
            padding-left: 25px;
        .x-form-field-wrap .ux-icon-combo-icon {
            top: 3px;
            left: 5px;
        .ux-icon-combo-item {
            background-repeat: no-repeat ! important;
            background-position: 3px 50% ! important;
            padding-left: 24px ! important;
        <style type="text/css">
            body .x-panel {
            .icon-grid {
                background-image:url(../shared/icons/fam/grid.png) !important;
            .icon-email {
                background-image:url(../shared/icons/fam/grid.png) !important;
            #button-grid .x-panel-body {
                border:1px solid #99bbe8;
                border-top:0 none;
            .icon-add {
                background-image:url(../shared/icons/fam/add.gif) !important;
            .add {
                background-image:url(../shared/icons/fam/add.gif) !important;
            .option {
                background-image:url(../shared/icons/fam/plugin.gif) !important;
            .remove {
                background-image:url(../shared/icons/fam/delete.gif) !important;
            .save {
                background-image:url(../shared/icons/save.gif) !important;
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    <h1>GridView3 Example</h1>
    <p>Note that the js is not minified so it is readable. See <a href="grid3.js">grid3.js</a>.</p>
    And copied code for IconCombo from Sakalos: Ext.ux.IconCombo.js
    // vim: ts=4:sw=4:nu:fdc=2:nospell
      * Ext.ux.IconCombo Extension Class for Ext 2.x Library
      * @author  Ing. Jozef Sakalos
      * @version $Id: Ext.ux.IconCombo.js 617 2007-12-20 11:29:56Z jozo $
      * @class Ext.ux.IconCombo
      * @extends Ext.form.ComboBox
    Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {
        initComponent:function() {
            Ext.apply(this, {
                tpl:  '<tpl for=".">'
                    + '<div class="x-combo-list-item ux-icon-combo-item '
                    + '{' + this.iconClsField + '}">'
                    + '{' + this.displayField + '}'
                    + '</div></tpl>'
            // call parent initComponent
        }, // end of function initComponent
        onRender:function(ct, position) {
            // call parent onRender
  , ct, position);
            // adjust styles
            // add div for icon
            this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
                tag: 'div', style:'position:absolute'
        }, // end of function onRender
        setIconCls:function() {
            var rec =, this.getValue()).itemAt(0);
    //        var rec =, "DE").itemAt(0);
            if(rec) {
    			if (this.icon != null){
    		            this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
        }, // end of function setIconCls
        setValue: function(value) {
  , value);
    //	  this.curValue = value;
    //, "");		
        } // end of function setValue
    // register xtype
    Ext.reg('iconcombo', Ext.ux.IconCombo);
    // end of file
    No idea how to make a custom render? Hope can get some clues..


  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2007
    Vote Rating


    Use editor as shown below - it works.
    PHP Code:
    editor: new Ext.grid.GridEditor(iconCom)}, 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts