[CLOSED] how to create multi select combobox on client side

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] how to create multi select combobox on client side

    Hi all,

    I have a grid with a custom editor for each row. Some rows need a multi combobox as editor(see example).
    I don't find the multi combo as a standard control in ext.js 3.4.0 so I was wondering if there is a way to create it on the client side.
    Any help would be highly appreciated.

     
    
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!ExtNet.IsAjaxRequest)
            {
                Store store = GridPanel1.GetStore();
                 
                store.DataSource = new object[] 
                { 
                    new object[] { "TextField", "text", null },
                     
                    new object[] { "NumberField", "10", null },
                     
                    new object[] { "ComboBox", "1", new object[] 
                        {
                            new object[] {"item1", "1"}, new object[] {"item2", "2"}, new object[] {"item3", "3"}
                        } 
                    },
                    
                    new object[] { "MultiComboBox", "1", new object[] 
                        {
                            new object[] {"item1", "1"}, new object[] {"item2", "2"}, new object[] {"item3", "3"}
                        } 
                    }
                };
                 
                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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
      
        <script type="text/javascript">
    
            var getRenderer = function (value, metadata, record) {
    
                if (record.get("editor") == "ComboBox") {
                    var storeData = record.get("enum");
    
                    var k;
                    for (k = 0; k < storeData.length; ++k) {
    
                        if (storeData[k][1] == value) {
    
                            return storeData[k][0];
                        }
    
                    }
                }
    
                return value;
            };
    
            var setEditor = function (e) {
                var column = e.grid.getColumnModel().columns[e.column],
                    ed = column.getCellEditor(e.row);
                if (ed) {
                    ed.destroy();
                }
                switch (e.record.get("editor")) {
                    case "TextField":
                        column.setEditor(new Ext.form.TextField());
                        break;
    
                    case "NumberField":
                        column.setEditor(new Ext.form.NumberField());
                        break;
    
                    case "ComboBox":
    
                        column.setEditor(
    
                        new Ext.form.ComboBox({
    
                            displayField: "text",
                            mode: "local",
                            triggerAction: "all",
                            valueField: "value",
                            store: new Ext.data.SimpleStore({
                                fields: ["text", "value"]
                            })
                        }));
    
    
                        column.getEditor().store.loadData(e.record.get("enum"));
    
                        break;
                    case "MultiComboBox":
    
           
    
    
                        column.setEditor(
    
                        new Ext.form.ComboBox({              // <== I NEED HELP HERE
    
                            displayField: "text",
                            mode: "local",
                            triggerAction: "all",
                            valueField: "value",
                            store: new Ext.data.SimpleStore({
                                fields: ["text", "value"]
                            })
                        }));
    
    
                        column.getEditor().store.loadData(e.record.get("enum"));
                        
                        break;
                        
                }
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                AutoHeight="true"
                Width="210">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="editor" />
                                    <ext:RecordField Name="test" />
                                    <ext:RecordField Name="enum" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column Header="Editor" DataIndex="editor" />
                        <ext:Column Header="Test" DataIndex="test" > 
                            <Renderer Fn="getRenderer"/>
                        </ext:Column>
     
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <BeforeEdit Fn="setEditor" />
                    <Render Handler="this.getColumnModel().setEditable(1, true);" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 28, 2012 at 5:18 PM. Reason: [CLOSED]

Similar Threads

  1. [CLOSED] How I can create a CalendarPanel in client side?
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 18, 2012, 4:51 PM
  2. How to Create MultiCombo at client side?
    By zhangsir199 in forum 1.x Help
    Replies: 4
    Last Post: Aug 20, 2010, 5:53 AM
  3. [CLOSED] gridpanel row select client side
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 20, 2009, 12:50 PM
  4. multi select add selected item on server side
    By [WP]joju in forum 1.x Help
    Replies: 4
    Last Post: Jan 09, 2009, 7:01 AM

Tags for this Thread

Posting Permissions