PDA

View Full Version : IconCombo not show up in EditorGrid



lingz_public
23 Mar 2010, 12:41 AM
Hi,

I am learning Ext JS and just using IconCombo from Sakalos, that's a great component. It works well in form. While when I am trying to put it into grid, it never shows up. Hope to get some clues here!

What I got in the grid 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
*/


Ext.onReady(function(){

Ext.QuickTips.init();

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({
listeners:{
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.');
}
}
,callbacks:{
'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);
}
}
,align:'left'
}); */
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([
expander,
{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: {
forceFit:true
},
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
});

iconCom.render();

});

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" },
listeners:{
exception: function(dataProxy, type, action, options, response, args) {
var initData = Ext.util.JSON.decode(response.responseText);
if(!initData.success){
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: {
forceFit:true
},
disableSelection : false,
hideHeaders: false,
autoHeight: true,
collapsible: false,
disableSelection : true,
enableHdMenu : false,
trackMouseOver : false,
autoSizeColumns: true
});

blstore.load();
blgrid.render(Ext.get('remData'+index));


};


// 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:


<html>
<head>
<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;
}

.x-form-field-wrap{
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>

<style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.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;
}
</style>
</head>
<body>
<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>

</body>
</html>


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
Ext.ux.IconCombo.superclass.initComponent.call(this);

}, // end of function initComponent

onRender:function(ct, position) {
// call parent onRender
Ext.ux.IconCombo.superclass.onRender.call(this, ct, position);

// adjust styles
this.wrap.applyStyles({position:'relative'});
this.el.addClass('ux-icon-combo-input');

// 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.setIconCls();
// 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

gotcha
6 Apr 2010, 12:04 PM
Use editor as shown below - it works.


{header: "Country", width: 8, sortable: true, dataIndex: 'action',
editor: new Ext.grid.GridEditor(iconCom)},

lingz_public
7 Apr 2010, 2:31 AM
Thanks gotcha, what I missed is a renderer in ColumnModel definition.


{header: "Country", width: 8, sortable: true, dataIndex: 'action',
renderer:displayIcon,
editor: 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!');
}
}
})
}

lingz_public
7 Apr 2010, 3:34 PM
Use editor as shown below - it works.


{header: "Country", width: 8, sortable: true, dataIndex: 'action',
editor: new Ext.grid.GridEditor(iconCom)},


Thanks gotcha, this could be in Ext 3.1? I don't find it in Ext 2.3.

BR --Ling

aero2010
21 May 2010, 12:06 AM
Hi Lingz,

Would you mind to share with us your code in the displayIcon renderer?

I have exactly the same problem as you did.

Thanks in advance.

lingz_public
22 May 2010, 6:33 PM
Here goes the renderer:



displayIcon = function(value){
switch(value) {
case 'Idle':
return '<div class="ux-txt-idle">&nbsp;&nbsp;Setup</div> ';
case 'Active':
return '<div class="ux-txt-active">&nbsp;&nbsp;Active</div> ';
case 'Repair':
return '<div class="ux-txt-repair">&nbsp;&nbsp;In Repair</div> ';
case 'Broken':
return '<div class="ux-txt-broken">&nbsp;&nbsp;Broken</div> ';
case 'Loan':
return '<div class="ux-txt-loan">&nbsp;&nbsp;On Loan</div> ';
case 'Available':
return '<div class="ux-txt-avail">&nbsp;&nbsp;Available</div> ';
case 'Decommision':
return '<div class="ux-txt-decom">&nbsp;&nbsp;Decommision</div> ';

}
};


And one example of the style is like below:


.ux-txt-broken {
background-image:url(../ext-2.3.0/examples/shared/icons/fam/red.png);
background-repeat: no-repeat;
background-position: 50% 50%;
width: 18px;
height: 14px;
padding-left: 24px ;
}