[CLOSED] how to add a blank row to the selected node of gridpanel

  1. #1

    [CLOSED] how to add a blank row to the selected node of gridpanel

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="product_type.aspx.cs" Inherits="extdemo.admin.pages.product_type" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript">
            var r_p_product_type = function (v, meta, record) {
                var r = App.s_p_t.getById(v);
                if (!Ext.isEmpty(r)) {
                    return r.get("type");
                } else {
                    return v;
                }
            };
            var r_p_product_type1 = function (v, meta, record) {
                if (!Ext.isEmpty(record)) {
                    return record.get('type');   // Use parentNode of current record
                }
                return v;
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
            <ext:Store runat="server" ID="s_p_t">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="id"></ext:ModelField>
                            <ext:ModelField Name="type"></ext:ModelField>
                            <ext:ModelField Name="pid"></ext:ModelField>
                        </Fields>
                    </ext:Model>
                </Model>
                <Listeners>
                    <Load Handler="#{tp_product_type}.view.refresh();"></Load>
                </Listeners>
            </ext:Store>
            <ext:Viewport runat="server">
                <Items>
                    <ext:TreePanel ID="tp_product_type" runat="server" Title="商品类别管理">
                        <Store>
                            <ext:TreeStore runat="server" ID="ts_product_type">
                                <Model>
                                    <ext:Model ID="Model3" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="id"></ext:ModelField>
                                            <ext:ModelField Name="type"></ext:ModelField>
                                            <ext:ModelField Name="pid"></ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:TreeStore>
                        </Store>
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="新增" Icon="Add">
                                        <Listeners>
                                            <Click Handler="
                                                  var selection = #{RowSelectionModel1}.getSelection()[0];
                                                   // here how to get the selected node, and apeend a child blank node to the node?
                                                ">
                                            </Click>
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
    
    
                        <ColumnModel>
                            <Columns>
                                <ext:Column runat="server" DataIndex="id" Text="编号"></ext:Column>
                                <ext:TreeColumn runat="server" DataIndex="type" Text="类别" Flex="1">
                                    <Editor>
                                        <ext:TextField runat="server"></ext:TextField>
                                    </Editor>
                                </ext:TreeColumn>
                                <ext:Column runat="server" DataIndex="pid" Text="父类别" Flex="1">
                                    <Renderer Fn="r_p_product_type" />
                                    <Editor>
                                        <ext:DropDownField runat="server" ID="ddf_ptype" Mode="ValueText">
    
                                            <Component>
                                                <ext:TreePanel runat="server" ID="tp_product_type1">
                                                    <Store>
                                                        <ext:TreeStore runat="server" ID="TreeStore1">
                                                            <Model>
                                                                <ext:Model ID="Model2" runat="server">
                                                                    <Fields>
                                                                        <ext:ModelField Name="id"></ext:ModelField>
                                                                        <ext:ModelField Name="type"></ext:ModelField>
                                                                        <ext:ModelField Name="pid"></ext:ModelField>
                                                                    </Fields>
                                                                </ext:Model>
                                                            </Model>
                                                        </ext:TreeStore>
                                                    </Store>
    
                                                    <ColumnModel>
                                                        <Columns>
                                                            <ext:TreeColumn runat="server" DataIndex="type" Flex="1">
                                                            </ext:TreeColumn>
                                                        </Columns>
                                                    </ColumnModel>
                                                    <Listeners>
                                                        <ItemClick Handler="
                                                            this.dropDownField.setValue(record.data.id, record.data.type, false);
                                                            this.dropDownField.collapse();
                                                            ">
                                                        </ItemClick>
                                                    </Listeners>
                                                </ext:TreePanel>
                                            </Component>
                                        </ext:DropDownField>
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <Plugins>
                            <ext:CellEditing runat="server">
                                <DirectEvents>
                                    <BeforeEdit OnEvent="SelectPtype" Before="
                return el.activeColumn.dataIndex == 'pid';
                ">
                                    </BeforeEdit>
                                </DirectEvents>
                            </ext:CellEditing>
                        </Plugins>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                        </SelectionModel>
                    </ext:TreePanel>
                </Items>
            </ext:Viewport>
    
        </form>
    </body>
    </html>
    i through the code
    var selection = #{RowSelectionModel1}.getSelection()[0];
    get the selected model, it return the Ext.data.Model , how to get the selected node through Ext.data.Model?
    and then i can call node.appendChild method.
    Last edited by Daniil; Dec 13, 2013 at 6:54 AM. Reason: [CLOSED]
  2. #2
    Hello!

    I do not quite understand you but take a look at the following sample:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Button runat="server" Text="Select and Add">
                <Listeners>
                    <Click Handler="
                        #{TreePanel1}.getSelectionModel().select(#{TreePanel1}.store.getRootNode().childNodes[0].childNodes[0]);
                        #{TreePanel1}.getSelectionModel().getSelection()[0].expand();
                        #{TreePanel1}.getSelectionModel().getSelection()[0].appendChild({leaf:true,task:'Another Kitchen supplies',duration:0.25,user:'Tommy Maintz'});" />
                </Listeners>
            </ext:Button>
    
            <ext:TreePanel 
                runat="server"
                ID="TreePanel1"
                Title="Core Team Projects"
                Width="500"
                Height="300"
                Collapsible="true"
                UseArrows="true"
                RootVisible="false"
                MultiSelect="true"
                SingleExpand="true"
                FolderSort="true">
                <Fields>
                    <ext:ModelField Name="task" />
                    <ext:ModelField Name="user" />
                    <ext:ModelField Name="duration" />
                    <ext:ModelField Name="done" Type="Boolean" />
                </Fields>
                <ColumnModel>
                    <Columns>
                        <ext:TreeColumn 
                            runat="server"
                            Text="Task" 
                            Flex="2" 
                            Sortable="true"
                            DataIndex="task" />
                        <ext:Column 
                            runat="server"
                            Text="Assigned To" 
                            Flex="1" 
                            Sortable="true"
                            DataIndex="user" />
                        <ext:CheckColumn runat="server" 
                           Text="Done"
                           DataIndex="done"
                           Width="40"
                           Editable="true"
                           StopSelection="false" />
                    </Columns>    
                </ColumnModel>
                
                <Root>
                    <ext:Node Text="Tasks">
                        <Children>
                            <ext:Node Icon="Folder" Expanded="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                                    <ext:ConfigItem Name="duration" Value="13.25" />
                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                </CustomAttributes>
                                <Children>
                                    <ext:Node Icon="Folder">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
                                            <ext:ConfigItem Name="duration" Value="1.25" />
                                            <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                        </CustomAttributes>
                                        <Children>
                                            <ext:Node Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Kitchen supplies" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                </Children>
                            </ext:Node>
                        </Children>
                    </ext:Node>
                </Root>
            </ext:TreePanel>        
        </form>
    </body>
    </html>
  3. #3

    how to remove the selected treepanel's nodes?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="product_type.aspx.cs" Inherits="extdemo.admin.pages.product_type" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript">
            var r_p_product_type = function (v, meta, record) {
                var r = App.s_p_t.getById(v);
                if (!Ext.isEmpty(r)) {
                    return r.get("type");
                } else {
                    return v;
                }
            };
            var r_p_product_type1 = function (v, meta, record) {
                if (!Ext.isEmpty(record)) {
                    return record.get('type');   // Use parentNode of current record
                }
                return v;
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
            <ext:Store runat="server" ID="s_p_t">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="id"></ext:ModelField>
                            <ext:ModelField Name="type"></ext:ModelField>
                            <ext:ModelField Name="pid"></ext:ModelField>
                        </Fields>
                    </ext:Model>
                </Model>
                <Listeners>
                    <Load Handler="#{tp_product_type}.view.refresh();"></Load>
                </Listeners>
            </ext:Store>
            <ext:Viewport runat="server">
                <Items>
                    <ext:TreePanel ID="tp_product_type" runat="server" Title="商品类别管理">
                        <Store>
                            <ext:TreeStore runat="server" ID="ts_product_type">
                                <Model>
                                    <ext:Model ID="Model3" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="id"></ext:ModelField>
                                            <ext:ModelField Name="type"></ext:ModelField>
                                            <ext:ModelField Name="pid"></ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:TreeStore>
                        </Store>
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="新增" Icon="Add">
                                        <Listeners>
                                            <Click Handler="
                                                    var selection = #{RowSelectionModel1}.getSelection()[0];
                                                    if(selection){
                                                      selection.data.leaf = false;
                                                      selection.appendChild({id:'',pid:selection.data.id,type:'新类别',leaf:true});
                                                      selection.expand();
                                                    }else{
                                                       Ext.Msg.alert('提示','请选择一个类别');
                                                    }
                                                ">
                                            </Click>
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="删除" Icon="Delete">
                                         <Listeners>
                                             <Click Handler="
                                                 var selection = #{RowSelectionModel1}.getSelection();
                                                 if(selection){
                                                    #{tp_product_type}.store.remove(selection);  //here i want to remove the selected node, but error show there is no remove mothod, how to do?
                                                 }
                                                 "></Click>
                                         </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="刷新" Icon="Reload">
                                        <Listeners>
                                            <Click Handler="
                                                   window.location='product_type.aspx';
                                                "> 
                                            </Click>
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
    
    
                        <ColumnModel>
                            <Columns>
                                <ext:Column runat="server" DataIndex="id" Text="编号"></ext:Column>
                                <ext:TreeColumn runat="server" DataIndex="type" Text="类别" Flex="1">
                                    <Editor>
                                        <ext:TextField runat="server"></ext:TextField>
                                    </Editor>
                                </ext:TreeColumn>
                                <ext:Column runat="server" DataIndex="pid" Text="父类别" Flex="1">
                                    <Renderer Fn="r_p_product_type" />
                                    <Editor>
                                        <ext:DropDownField runat="server" ID="ddf_ptype" Mode="ValueText">
    
                                            <Component>
                                                <ext:TreePanel runat="server" ID="tp_product_type1">
                                                    <Store>
                                                        <ext:TreeStore runat="server" ID="TreeStore1">
                                                            <Model>
                                                                <ext:Model ID="Model2" runat="server">
                                                                    <Fields>
                                                                        <ext:ModelField Name="id"></ext:ModelField>
                                                                        <ext:ModelField Name="type"></ext:ModelField>
                                                                        <ext:ModelField Name="pid"></ext:ModelField>
                                                                    </Fields>
                                                                </ext:Model>
                                                            </Model>
                                                        </ext:TreeStore>
                                                    </Store>
    
                                                    <ColumnModel>
                                                        <Columns>
                                                            <ext:TreeColumn runat="server" DataIndex="type" Flex="1">
                                                            </ext:TreeColumn>
                                                        </Columns>
                                                    </ColumnModel>
                                                    <Listeners>
                                                        <ItemClick Handler="
                                                            this.dropDownField.setValue(record.data.id, record.data.type, false);
                                                            this.dropDownField.collapse();
                                                            ">
                                                        </ItemClick>
                                                    </Listeners>
                                                </ext:TreePanel>
                                            </Component>
                                        </ext:DropDownField>
                                    </Editor>
                                </ext:Column>
                            </Columns>
                        </ColumnModel>
                        <Plugins>
                            <ext:CellEditing runat="server">
                                <DirectEvents>
                                    <BeforeEdit OnEvent="SelectPtype" Before="
                return el.activeColumn.dataIndex == 'pid';
                ">
                                    </BeforeEdit>
                                </DirectEvents>
                            </ext:CellEditing>
                        </Plugins>
                        <SelectionModel>
                            <ext:TreeSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                        </SelectionModel>
                    </ext:TreePanel>
                </Items>
            </ext:Viewport>
    
        </form>
    </body>
    </html>
    how to remove the selected treepanel's nodes?
  4. #4
    Try the following button to the previous example:

    <ext:Button ID="Button2" runat="server" Text="Remove Selected">
        <Listeners>
            <Click Handler="
                var record =#{TreePanel1}.getSelectionModel().getSelection()[0];
                record.remove(true);" />
        </Listeners>
    </ext:Button>

Similar Threads

  1. Replies: 3
    Last Post: Jun 18, 2013, 2:10 AM
  2. Replies: 11
    Last Post: Feb 06, 2013, 6:09 PM
  3. Replies: 3
    Last Post: Jan 24, 2011, 5:11 PM
  4. Replies: 1
    Last Post: Nov 24, 2010, 4:04 PM
  5. Replies: 1
    Last Post: Nov 17, 2010, 1:42 PM

Posting Permissions