1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Phoenix, AZ
    Vote Rating
    zombeerose will become famous soon enough zombeerose will become famous soon enough


    Default IconCombo in a Grid

    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 - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    DC Area =)
    Vote Rating
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all



    you should setup a custom renderer for that column

  3. #3
    Ext User
    Join Date
    Jan 2010
    Vote Rating
    lingz_public is on a distinguished road


    Question I ran into same problem

    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.
     * licensing@extjs.com
     * http://extjs.com/license
        var xg = Ext.grid;
        // shared reader
        var reader = new Ext.data.ArrayReader({}, [
           {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 Ext.data.SimpleStore({
    	                    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 Ext.data.Store({
                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 Ext.data.ArrayReader({}, [
           {name: 'id'},
           {name: 'type'},
           {name: 'theoQty'},
           {name: 'theoQtyValue', type: 'float'},
           {name: 'settledQty'},
           {name: 'settledQtyValue', type: 'float'}
        var blstore = new Ext.data.Store({
            reader: blreader,
            data: xg.dummyData2
        }); */
        var blstore = new Ext.data.Store({
        	 id: 'chamber-store',
    	 proxy: new Ext.data.HttpProxy ({
    	    		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 Ext.data.JsonReader({
           	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
            Ext.ux.IconCombo.superclass.onRender.call(this, 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.store.query(this.valueField, this.getValue()).itemAt(0);
    //        var rec = this.store.query(this.valueField, "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) {
            Ext.ux.IconCombo.superclass.setValue.call(this, value);
    //	  this.curValue = value;
    //        Ext.ux.IconCombo.superclass.setValue.call(this, "");		
        } // 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
    gotcha is on a distinguished road



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