PDA

View Full Version : [CLOSED] how to add a blank row to the selected node of gridpanel



hdsoso
Dec 07, 2013, 6:25 AM
<%@ 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.

Baidaly
Dec 07, 2013, 8:16 AM
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(#{TreePan el1}.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>

hdsoso
Dec 08, 2013, 12:50 PM
<%@ 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?

Baidaly
Dec 08, 2013, 8:26 PM
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>