Disable some Combobox items

  1. #1

    Disable some items in a Combobox

    I'm trying to follow this example: http://forums.ext.net/showthread.php...ms-in-combobox

    But i'm a little lost, doing the same thing but ... loading the info from a Store.

    I have a controller that get me a DataTable with this columns:
    - Codigo
    - Nombre
    - Movimiento (have 1 or 0 to know which one will be disabled)

    In the view I have this store:

    <ext:Store ID="EncCodigoStore" runat="server" RemotePaging="false" RemoteSort="false" ShowWarningOnFailure="false" >
    		<Proxy>
    			<ext:HttpProxy Json="true" Method="GET" Url="~/EntidadesComunicacion/GetDataForList" />
    		</Proxy>
    		<DirectEventConfig IsUpload="true" />
    		<Reader>
    			<ext:JsonReader Root="data" TotalProperty="total" IDProperty="Codigo">
    				<Fields>
    					<ext:RecordField Name="Codigo" />
    					<ext:RecordField Name="Nombre" />
                        <ext:RecordField Name="Movimiento" />
    				</Fields>
    			</ext:JsonReader>
    		</Reader>
    		<SortInfo Field="Codigo" Direction="ASC" />
    		<Listeners>
    			<LoadException Handler="if (response.status === 200 ) {  } else Ext.MessageBox.alert('La consulta que se estaba realizando no se pudo completar.', response.statusText);" />
    		</Listeners>
    	</ext:Store>
    And I have this combo:
                                <ext:ComboBox ID="EncCodigo" runat="server" AllowBlank="true" Editable="false" FieldLabel="Entidad"
                                    StoreID="EncCodigoStore"  ValueField="Codigo" DisplayField="Nombre">
                                    <Listeners>
                                        <Select Handler="this.triggers[0].show();" />
                                        <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                        <TriggerClick Handler="if (index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                    </Listeners>
                                    <Triggers>
                                        <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                    </Triggers>
    				            </ext:ComboBox>
    How can I use the Movimiento column in store to disable the items with 0 value?

    Thanks in advance!
    Last edited by equiman; Nov 01, 2012 at 4:35 PM.
  2. #2
    If this items can be disabled... can be a solution only changing his color to grey, like this example:

    http://forums.ext.net/showthread.php...ll=1#post50874

    But... how can I do to set gray color only to items with the value "Movimientos = 0"?
  3. #3
    To change color of some items in combobox you can use template:

    <ext:ComboBox ID="EncCodigo" runat="server" AllowBlank="true" Editable="false" FieldLabel="Entidad"
        StoreID="EncCodigoStore"  ValueField="Codigo" DisplayField="Nombre">
        <Listeners>
            <Select Handler="this.triggers[0].show();" />
            <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
            <TriggerClick Handler="if (index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
        </Listeners>
        <Triggers>
            <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
        </Triggers>
        <Template runat="server">
                <Html>
                <tpl for=".">
                        <tpl if="Movimiento == 0">
                              <span style="color: gray;">{Nombre}</span>
                        </tpl>
                        <tpl if="Movimiento != 0">
                            {Nombre}
                        </tpl>
                    </tpl>
                </Html>
            </Template>
    </ext:ComboBox>
  4. #4
    Hi @Baidaly thanks for your help. I'm apply the code... and works more or less.

    But it's only printing the items with Movimiento==0.

    This is the complete list view:
    Click image for larger version. 

Name:	combo-complete.png 
Views:	166 
Size:	41.3 KB 
ID:	5010

    This is the list with the code:
    Click image for larger version. 

Name:	combo-incomplete.png 
Views:	152 
Size:	31.4 KB 
ID:	5011

    I'm trying to solve it using:

                                                <tpl if="Movimiento == 1">
                                                    <span style="color: black;">{Nombre}</span>
                                                </tpl>
    Or using:
                                                <tpl if="Movimiento != 0">
                                                    <span style="color: black;">{Nombre}</span>
                                                </tpl>
    Instead of:
                                                <tpl if="Movimiento != 0">
                                                    {Nombre}
                                                </tpl>
    But have the same result: Only can see the items with "Movimiento==0"

    The other thing... is that now I can't select the items.

    Thanks in advance.
  5. #5
    The selection probleme was solved with informtion in this post:
    http://forums.ext.net/showthread.php...ll=1#post50874


    				            <ext:ComboBox 
                                    ID="EncCodigo" 
                                    runat="server" 
                                    AllowBlank="false" 
                                    Editable="false" 
                                    FieldLabel="Entidad"
                                    StoreID="EncCodigoStore"  ValueField="Codigo" DisplayField="Nombre"
                                    ItemSelector="div.search-item">
                                    <Listeners>
                                        <Select Handler="this.triggers[0].show();" />
                                        <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                        <TriggerClick Handler="if (index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                    </Listeners>
                                    <Triggers>
                                        <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                    </Triggers>
                                    <Template ID="Template1" runat="server">
                                        <Html>
                                            <tpl for=".">
                                                <tpl if="Movimiento == 0">
                                                    <div class="search-item" style="color: gray;"> {Nombre}</div>
                                                </tpl>
                                                <tpl if="Movimiento != 0">
                                                    <div class="search-item" style="color: black;"> {Nombre}</div>
                                                </tpl>
                                            </tpl>
                                        </Html>
                                    </Template>
    				            </ext:ComboBox>
    Usin <spam> tag the items are overlaping to each other (the can't see it). I change it to divs... but now all the items are gray.

    Thanks in advance!
    Last edited by equiman; Nov 01, 2012 at 9:15 PM.
  6. #6
    You are welcome!

    P.s. Sorry for mistake.
  7. #7
    Now all are working correctly... I can't see records with Movimientos != 0 because Store don't have it (My Mistake!) I change the DatTable and All Works perfect.

    I do some style changes to stadarice the theme view. It's the final result:

    				            <ext:ComboBox 
                                    ID="EncCodigo" 
                                    runat="server" 
                                    AllowBlank="false" 
                                    Editable="false" 
                                    FieldLabel="Entidad"
                                    StoreID="EncCodigoStore"  ValueField="Codigo" DisplayField="Nombre"
                                    ItemSelector="div.search-item">
                                    <Listeners>
                                        <Select Handler="this.triggers[0].show();" />
                                        <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                        <TriggerClick Handler="if (index == 0) { this.clearValue(); this.triggers[0].hide(); }" />
                                    </Listeners>
                                    <Triggers>
                                        <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                    </Triggers>
                                    <Template ID="Template1" runat="server">
                                        <Html>
                                            <tpl for=".">
                                                <tpl if="Movimiento == 1">
                                                    <div class="search-item" style="color: black; padding: 2px; border: 1px solid white !important;">{Nombre}</div>
                                                </tpl>
                                                <tpl if="Movimiento == 0">
                                                    <div class="search-item" style="color: gray; padding: 2px; border: 1px solid white !important;">{Nombre}</div>
                                                </tpl>
                                            </tpl>
                                        </Html>
                                    </Template>
    				            </ext:ComboBox>
    All credits to @Baidaly ... without his help maybe can't do it by myself. Thanks!!

    This post can be marked as SOLVED
    Last edited by equiman; Nov 01, 2012 at 10:16 PM.

Similar Threads

  1. Replies: 8
    Last Post: Dec 18, 2014, 6:35 AM
  2. [CLOSED] How to selectively disable some items in combobox
    By Shanti in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Feb 07, 2013, 4:11 PM
  3. Disable form Items
    By Kipetcoff in forum 1.x Help
    Replies: 1
    Last Post: Mar 26, 2012, 6:16 PM
  4. [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
  5. Disable all Items in Toolbar
    By real_unreal in forum 1.x Help
    Replies: 1
    Last Post: Feb 05, 2010, 5:45 PM

Posting Permissions