PDA

View Full Version : [CLOSED] Icon in MultiCombo



RCM
Oct 04, 2012, 5:43 PM
Hi,

I got this sample from you guys for version 1.0. Is there a sample that works in version 2.0


http://forums.ext.net/showthread.php?18723-CLOSED-Icon-in-MultiCombo

Daniil
Oct 04, 2012, 6:17 PM
Hi @RCM,

Unfortunately, we have no such example for v2.

Please clarify what exactly problems are you facing in porting?

RCM
Oct 04, 2012, 6:53 PM
Hi,

I am trying to display an icon next to each item in the combo box similar to the icon combo box. Each item in the combo box may have a different icon.

RCM
Oct 04, 2012, 7:09 PM
hi,

I am getting the error:


Object doesn't support property or method 'createDelegate'


See create delegate below.


this.tpl = new Ext.XTemplate(this.tpl, {
getItemClass: (function () {
if (this.selectionMode === "selection") {
return "x-mcombo-nimg-item";
}

return "x-mcombo-img-item";

}).createDelegate(this),

getImgClass: (function (values) {
if (this.selectionMode === "selection") {
return "";
}

var found = false;

Ext.each(this.checkedRecords, function (record) {
// do not replace == by ===
if (values[this.valueField] == record.get(this.valueField)) {
found = true;
return false;
}
}, this);

return found ? "x-grid3-check-col-on" : "x-grid3-check-col";
}).createDelegate(this, [], true)
});

geoffrey.mcgill
Oct 04, 2012, 10:58 PM
Please see http://dev.sencha.com/deploy/ext-4.0.0/overview/index.html


There are a few noteworthy changes to how the base Function prototype methods have been implemented in Ext 4. Most importantly, the Function.createDelegate andFunction.createCallback methods are now named Ext.Function.bind and Ext.Function.pass respectively. Likewise, Function.defer is now available asExt.Function.defer. Because these three functions are so commonly used, they are also aliased directly onto the Ext object as Ext.bind, Ext.pass and Ext.defer.

Daniil
Oct 05, 2012, 4:48 AM
This is also addressed in the #40 CHANGELOG item.
http://examples2.ext.net/#/Getting_Started/Release_Documents/CHANGELOG/


40. Now ExtJS doesn't override/extend standard JavaScript classes.

The createDelegate function has been renamed to bind.

Example 1

//Old
String.format(string, value1, value2);

//New
Ext.String.format(string, value1, value2);

Example 2

//Old
var f = function () { };
f.defer(10);

//New
Ext.Function.defer(f, 10);

Example 3

//Old
var f = function () {
alert(this);
};
f.createDelegate('Hello!')();

//New
Ext.Function.bind(f, 'Hello!')();

RCM
Oct 06, 2012, 6:35 PM
Hi,

I updated the function but the dropdown list is not being displayed. The store is loaded and when if I select an item in teh list from code the item gets displayed but i can't see the other items in the dropdown.. see updated code below..




//For showing image in multiCombo
var myInitComponent = function () {
this.editable = false;

if (!this.tpl) {
this.tpl = '<tpl for="."><div class="x-combo-list-item {[this.getItemClass()]} icon-combo-item {IconCls}">' +
'<img src="' + Ext.BLANK_IMAGE_URL + '" class="{[this.getImgClass(values)]}" />' +
'<div class="x-mcombo-text">{' + this.displayField + '}</div></div></tpl>';

this.tpl = new Ext.XTemplate(this.tpl, {
getItemClass: (function () {
if (this.selectionMode === "selection") {
return "x-mcombo-nimg-item";
}

return "x-mcombo-img-item";

}, Ext.Function.bind(this)),

getImgClass: (function (values) {
if (this.selectionMode === "selection") {
return "";
}

var found = false;

Ext.each(this.checkedRecords, function (record) {
// do not replace == by ===
if (values[this.valueField] == record.get(this.valueField)) {
found = true;
return false;
}
}, this);

return found ? "x-grid3-check-col-on" : "x-grid3-check-col";
}, Ext.Function.bind(this, [], true))
});
}

this.checkedRecords = [];

Ext.net.MultiCombo.superclass.initComponent.apply( this, arguments);

if (this.selectionPredefined) {
this.initSelection(this.selectionPredefined);
}

this.on("beforequery", this.onBeforeQuery);
};

geoffrey.mcgill
Oct 06, 2012, 8:34 PM
When I try to run the code above, many errors are thrown. Can you post a simplified .aspx demonstrating the whole scenario. Please ensure you remove all code that is not directly related to the problem from the sample.

RCM
Oct 06, 2012, 10:35 PM
Hi,

Please see sample below.




<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
var getData = function (operation) {
var data = Array();
var item = { Key: 1, Value: "Name" }
data.push(item);
item = { Key: 1, Value: "Surname" }
data.push(item);

App.Combo1.store.loadData(data);
};

var show = function (operation) {
};

//For showing image in multiCombo
var myInitComponent = function () {
this.editable = false;

if (!this.tpl) {
this.tpl = '<tpl for="."><div class="x-combo-list-item {[this.getItemClass()]} icon-combo-item {IconCls}">' +
'<img src="' + Ext.BLANK_IMAGE_URL + '" class="{[this.getImgClass(values)]}" />' +
'<div class="x-mcombo-text">{' + this.displayField + '}</div></div></tpl>';

this.tpl = new Ext.XTemplate(this.tpl, {
getItemClass: (function () {
if (this.selectionMode === "selection") {
return "x-mcombo-nimg-item";
}

return "x-mcombo-img-item";

}, Ext.Function.bind(this)),

getImgClass: (function (values) {
if (this.selectionMode === "selection") {
return "";
}

var found = false;

Ext.each(this.checkedRecords, function (record) {
// do not replace == by ===
if (values[this.valueField] == record.get(this.valueField)) {
found = true;
return false;
}
}, this);

return found ? "x-grid3-check-col-on" : "x-grid3-check-col";
}, Ext.Function.bind(this, [], true))
});
}

this.checkedRecords = [];

Ext.net.MultiCombo.superclass.initComponent.apply( this, arguments);

if (this.selectionPredefined) {
this.initSelection(this.selectionPredefined);
}

this.on("beforequery", this.onBeforeQuery);
};


</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<style type="text/css">
.my-cells .x-grid-cell-inner {
white-space: normal;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Window ID="windowExportWorkItems" runat="server" AutoHeight="true" Width="300"
Title="Load combo" Draggable="true" Resizable="false" Modal="true" IDMode="Static"
Closable="true">
<Defaults>
<ext:Parameter Name="IDMode" Value="Static" />
</Defaults>
<Items>
<ext:MultiCombo ID="Combo1" runat="server" Editable="false" QueryMode="Local" FieldLabel="Users"
ForceSelection="true" AllowBlank="false" DisplayField="Fullname" ValueField="Id"
AutoDataBind="true" TabIndex="1" AnchorHorizontal="100%">
<Store>
<ext:Store runat="server" AutoLoad ="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Key" />
<ext:ModelField Name="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
</Listeners>
<CustomConfig>
<ext:ConfigItem Name="initComponent" Value="myInitComponent" Mode="Raw" />
</CustomConfig>
</ext:MultiCombo>
</Items>
<Listeners>
<AfterRender Handler="getData();" />
<Show Handler="show();" />
</Listeners>
</ext:Window>
</body>
</html>

Daniil
Oct 08, 2012, 8:07 AM
Please override the getPicker method instead of the initComponent one.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Store store = this.MultiCombo1.GetStore();
store.DataSource = new object[]
{
new object[] { ResourceManager.GetIconClassName(Icon.FlagFr), "France"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "United States"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"}
};

store.DataBind();

ResourceManager1.RegisterIcon(Icon.FlagFr);
ResourceManager1.RegisterIcon(Icon.FlagCa);
ResourceManager1.RegisterIcon(Icon.FlagDe);
ResourceManager1.RegisterIcon(Icon.FlagUs);
ResourceManager1.RegisterIcon(Icon.FlagIt);
}
</script>

<html>
<head runat="server">
<title>Ext.NET Example</title>

<script type="text/javascript">
var myGetPicker = function () {
if (!this.picker) {
this.listConfig = this.listConfig || {};
this.listConfig.getInnerTpl = function (displayField) {
return '<div class="x-combo-list-item {[this.getItemClass(values)]}">' +
'<div class="x-mcombo-text icon-combo-item {iconCls}">{' + displayField + '}</div></div>'; // added " icon-combo-item {iconCls}"
};

this.listConfig.selModel = {
mode: 'SIMPLE'
};

this.picker = this.createPicker();

this.mon(this.picker.getSelectionModel(), 'select', this.onListSelect, this);
this.mon(this.picker.getSelectionModel(), 'deselect', this.onListDeselect, this);

this.picker.tpl.getItemClass = Ext.Function.bind(function (values) {
var record;

if (this.selectionMode === "selection") {
return "";
}

Ext.each(this.store.getRange(), function (r) {
// do not replace == by ===
if (r.get(this.valueField) == values[this.valueField]) {
record = r;
return false;
}
}, this);

if (record && this.picker.getSelectionModel().isSelected(record) ) {
return "x-mcombo-item-checked";
}

return "x-mcombo-item-unchecked";

}, this, [], true);


if (this.selectionMode !== "checkbox") {
this.picker.on("render", function () {
this.picker.overItemCls = "x-multi-selected";
}, this);
}

this.picker.on("viewready", this.onViewReady, this, {single:true});
}

return this.picker;
};
</script>

<style type="text/css">
.icon-combo-item {
background-repeat: no-repeat ! important;
background-position: 3px 50% ! important;
padding-left: 24px ! important;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:MultiCombo
ID="MultiCombo1"
runat="server"
Width="250"
DisplayField="name"
QueryMode="Local"
EmptyText="Select countries...">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="iconCls" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<CustomConfig>
<ext:ConfigItem Name="getPicker" Value="myGetPicker" Mode="Raw" />
</CustomConfig>
</ext:MultiCombo>
</body>
</html>

RCM
Oct 10, 2012, 3:07 PM
hi,

please mark as closed.

Daniil
Dec 17, 2012, 7:40 AM
With the latest sources from SVN it is possible to set up ListConfig.ItemTpl.

It allows to don't override the getPicker method. But, in a common case, it might break the functionality. So, a developer is responsible for setting up this property.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.MultiCombo1.GetStore();
store.DataSource = new object[]
{
new object[] { ResourceManager.GetIconClassName(Icon.FlagFr), "France"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "United States"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"}
};

store.DataBind();

ResourceManager1.RegisterIcon(Icon.FlagFr);
ResourceManager1.RegisterIcon(Icon.FlagCa);
ResourceManager1.RegisterIcon(Icon.FlagDe);
ResourceManager1.RegisterIcon(Icon.FlagUs);
ResourceManager1.RegisterIcon(Icon.FlagIt);
}
}
</script>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
.icon-combo-item {
background-repeat: no-repeat ! important;
background-position: 3px 50% ! important;
padding-left: 24px ! important;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:MultiCombo
ID="MultiCombo1"
runat="server"
Width="250"
DisplayField="name"
QueryMode="Local"
EmptyText="Select countries...">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="iconCls" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig runat="server">
<ItemTpl runat="server">
<Html>
<div class="x-combo-list-item {[this.getItemClass(values)]}">
<div class="x-mcombo-text icon-combo-item {iconCls}">{name}</div>
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:MultiCombo>
</body>
</html>

gappov
Feb 09, 2013, 9:01 PM
protected object ColorGroups
{
get { return ctx.ColorGroups.Select(c => new object[] { c.id, "#" + c.Color, c.ColorName }); }
}


<ext:MultiCombo runat="server" FieldLabel="COLOR GROUP" ID="COLOR_GROUP" ValueField="id"
DisplayField="ColorName" QueryMode="Local">
<Store>
<ext:Store runat="server" Data="<%# ColorGroups %>">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="Color" />
<ext:ModelField Name="ColorName" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader IDProperty="id" />
</Reader>
</ext:Store>
</Store>
<Listeners>
<BeforeRender Handler="this.getPicker().tpl.html =
'<ul>'+
'<tpl for=&quot;.&quot;>'+
'<li role=&quot;option&quot; class=&quot;x-boundlist-item&quot;>'+
'<div class=&quot;x-combo-list-item {[this.getItemClass(values)]}&quot;>'+
'<div class=&quot;x-mcombo-text&quot;>'+
'<span style=&quot;background:{Color}; border: solid 1px silver;&quot;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;{ColorName}'+
'</div>'+
'</div>'+
'</li>'+
'</tpl>'+
'</ul>';" />
</Listeners>
</ext:MultiCombo>
5577

Daniil
Feb 11, 2013, 4:11 AM
Hi @gappov,

Thank you for sharing. Actually, you do the same - override the default template.