Feb 01, 2013, 2:44 PM
Awesome solution, thanks Daniil, Daulet!! Below is a fulsome working example incorporating some previous behavioral tweaks. The only thing I'm not sure about is how to provide the correct relative URL to the background image stored in the resource file that's resolved in runtime.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>
<style type="text/css">
.my-multiselect
{
border-width: 0px;
}
.my-multiselect .ux-mselect-over
{
border-color:#ddd;
background-color:#efefef;
/*background-image:url(../images/row-over.gif);*/
}
.x-theme-blue .my-multiselect .ux-mselect .ux-mselect-selected
{
background-color: #dfe8f6 !important;
background-image: none;
border-color:#a3bae9;
}
.x-theme-gray .my-multiselect .ux-mselect .ux-mselect-selected
{
background-color:#cccccc !important;
background-image: none;
border-color:#acacac;
}
.x-theme-slate .my-multiselect .ux-mselect .ux-mselect-selected
{
background: #fbf0d2 !important;
border: 1px dotted #cccccc;
}
</style>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.override(Ext.ux.Multiselect, {
onViewBeforeClick : function (vw, index, node, e) {
this.preClickSelections = this.view.getSelectedIndexes();
if (this.disabled || this.readOnly || (this.preventDeselect && this.preClickSelections.indexOf(index) != -1)) {
return false;
}
}
});
var onMultiselectAfterRender = function (multiSelect) {
var view = multiSelect.view;
view.overClass = "ux-mselect-over";
view.mon(view.getTemplateTarget(), {
mouseover: view.onMouseOver,
mouseout: view.onMouseOut,
scope: view
});
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:MultiSelect
runat="server"
Width="300"
Cls="my-multiselect"
Height="250">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
</Items>
<Listeners>
<AfterRender Handler="this.view.on('containerclick', function () { return false; });" Fn="onMultiselectAfterRender" />
</Listeners>
</ext:MultiSelect>
</body>
</html>
Originally Posted by vadym.f
