[CLOSED] How to selectively disable some items in combobox

  1. #1

    [CLOSED] How to selectively disable some items in combobox

    Hi,

    I need to populate a combo with a list of items. However I need to enable and disable items in the list based upon certain user characteristics . The total list should be visable to all users; but depending upon who they are they should only be able to select certain items

    System.Web.UI.WebControls.ListItem allows me to state whether each item is enabled or not. Is there a coolite equivalent?

    I am using coolite version 0.8.3.29833 and Visual Studio 2008 SP1 with IE7

    Thanks
    Last edited by Daniil; Mar 16, 2011 at 3:21 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please use [CODE ] tags, see
    Forum Guidelines For Posting New Topics
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Please use [CODE ] tags, see
    Forum Guidelines For Posting New Topics
    I've updated the post as requested. I realise that there have been improvements with version 1, but we are not in a position to upgrade our projefts at the moment.

    Thanks
  4. #4
    Hi,

    I would suggest you the following way.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void GetItems(object sender, DirectEventArgs e)
        {
            string userId = e.ExtraParams["userId"];
            Store store = this.ComboBox1.GetStore();
            switch (userId)
            {
                case "user1":
                    store.DataSource = new object[] 
                    { 
                        new object[] { "2", "item2" },
                        new object[] { "3", "item3" }
                    };
                    break;
                case "user2":
                    store.DataSource = new object[] 
                    { 
                        new object[] { "1", "item1" },
                        new object[] { "2", "item2" },
                    };
                    break;
            }
    
            store.DataBind();
        }
    </script>
    
    <!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>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:ComboBox ID="ComboBox1" runat="server" ListEmptyText="No items">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="value" />
                                <ext:RecordField Name="text" />
                                <ext:RecordField Name="visible" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
        </ext:ComboBox>
        <ext:Button runat="server" Text="User1">
            <DirectEvents>
                <Click OnEvent="GetItems">
                    <EventMask ShowMask="true" />
                    <ExtraParams>
                        <ext:Parameter Name="userId" Value="user1" Mode="Value" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>
        <ext:Button runat="server" Text="User2">
            <DirectEvents>
                <Click OnEvent="GetItems">
                    <EventMask ShowMask="true" />
                    <ExtraParams>
                        <ext:Parameter Name="userId" Value="user2" Mode="Value" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>
        <ext:Button runat="server" Text="Reset">
            <DirectEvents>
                <Click OnEvent="GetItems">
                    <EventMask ShowMask="true" />
                </Click>
            </DirectEvents>
        </ext:Button>
        </form>
    </body>
    </html>
    Please let use know if you have any troubles to convert it to 0.8.3.
  5. #5
    Another way is using Template.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.ComboBox1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "item1", true },
                    new object[] { "2", "item2", true },
                    new object[] { "3", "item3", true },
                    new object[] { "4", "item4", true },
                    new object[] { "5", "item5", true }
                };
                store.DataBind();
            }
        }
    </script>
    
    <!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>
    
        <script type="text/javascript">
            var getAttributes = function(disabled) {
                var cls = "class='x-combo-list-item";
                if (!disabled) {
                    return cls + "'";
                } else {
                    return cls + " disabled-item'";
                }
            }  
        </script>
    
        <style type="text/css">
            .disabled-item {
                color: gray;
                padding : 2px;
            }
            .disabled-item.x-combo-selected {
                border: 1px solid white !important;
                background-color:inherit;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:ComboBox ID="ComboBox1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="value" />
                                <ext:RecordField Name="text" />
                                <ext:RecordField Name="disabled" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Template runat="server">
                <Html>
                <tpl for=".">
                        <div {[getAttributes(values.disabled)]}>{text}</div>
                    </tpl>
                </Html>
            </Template>
            <Listeners>
                <BeforeSelect Handler="return !record.data.disabled;" />
            </Listeners>
        </ext:ComboBox>
        <ext:Button runat="server" Text="User1">
            <Listeners>
                <Click Handler="var store = ComboBox1.getStore();
                                store.getAt(0).data.disabled = false;
                                store.getAt(1).data.disabled = false;
                                ComboBox1.view.refresh();" />
            </Listeners>
         </ext:Button>
        </form>
    </body>
    </html>
  6. #6
    Hi,

    The template option is what I need! The only thing I require now is to be able to disable the relevant items in the store based on a field value e.g. in your example the disabled field. Instead of doing this on a button click as you have - i.e. disable all items where the value of the disabled field = true. I need to do this after the data store is refreshed .

    How do I do this and how do I step through the store items in javascript?
  7. #7
    Example
    ComboBox1.getStore().each(function (r) {
        r.data.disabled = false;
    });
    ComboBox1.view.refresh();
    Please look at the Store's and DataView's APIs. Please note that ComboBox1.view is an instance of Ext.DataView.
    http://dev.sencha.com/deploy/dev/doc...Ext.data.Store
    http://dev.sencha.com/deploy/dev/doc...s=Ext.DataView
  8. #8
    Thanks - That worked very nicely!
  9. #9
    Here is the same discussion in the context of Ext.NET v2.
    http://forums.ext.net/showthread.php?23388

Similar Threads

  1. Replies: 8
    Last Post: Dec 18, 2014, 6:35 AM
  2. Disable form Items
    By Kipetcoff in forum 1.x Help
    Replies: 1
    Last Post: Mar 26, 2012, 6:16 PM
  3. [CLOSED] Disable shadowing on panel tool items
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 08, 2011, 7:38 AM
  4. [CLOSED] Combobox: How to remove the duplicate items in the combobox?
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 09, 2011, 9:34 AM
  5. Disable all Items in Toolbar
    By real_unreal in forum 1.x Help
    Replies: 1
    Last Post: Feb 05, 2010, 5:45 PM

Tags for this Thread

Posting Permissions