PDA

View Full Version : [CLOSED] How to using javascript generate the MultiSelect'item in Ext.Net beta2?



hujq
Jun 01, 2012, 2:49 AM
Administrator:
Hi!I used to created an composite user control in Coolite Ext 0.8,but now I am using the Ext.net beta2.0 development toolkit that you are offered,the old javascrip can not run and attach my requirement,so i hope you can help me reach solve the technological problem.
Thanks you very much!


the view of coolite 0.8
4315


the old version(Coolite v0.8) code is flowed as :

1.the multiselect def:

<ext:LayoutColumn ColumnWidth="0.35">
<ext:Panel ID="Panel6" runat="server" Title="已选中">
<Body>
<ext:MultiSelect ID="MultiSelect1" runat="server" Height="600" Width="450" ValueField="value"
DisplayField="text" SubmitText="true">
<Listeners>
<DblClick Handler="this.store.removeAt(index);" />
</Listeners>
</ext:MultiSelect>
</Body>
</ext:Panel>
</ext:LayoutColumn>
2.the listener


<ext:Button ID="Button1" runat="server" Text="Select" Icon="PlayBlue">
<Listeners>
<Click Handler="addCheckedNode(#{Tree1},#{Tree2},#{MultiSelect1})" />
</Listeners>
</ext:Button>
<br />
<ext:Button ID="Button2" runat="server" Text="DeleteAll" Icon="RewindBlue" Hidden="true">
</ext:Button>
<br />
<ext:Button ID="Button3" runat="server" Text="DeleteSelectedSingle" Icon="ReverseBlue">
<Listeners>
<Click Handler="delete_multiselect(#{MultiSelect1});" />
</Listeners>
</ext:Button>

3.the js code of listener:


//add multiselect item js code
var addCheckedNode = function(tree, tree1, ms) {
ms.store.removeAll();
var nodes = tree.getChecked();
var nodes1 = tree1.getChecked();
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var obj = ms.store.getById(node.id);
if (Ext.isEmpty(obj)) {
var record = new Ext.data.Record({ 'text': node.text, 'value': node.id }, node.id);
ms.store.add(record);
}
}
for (var j = 0; j < nodes1.length; j++) {
var node2 = nodes1[j];
var obj1 = ms.store.getById(node2.id);
if (Ext.isEmpty(obj1)) {
var record2 = new Ext.data.Record({ 'text': node2.text, 'value': node2.id }, node2.id);
ms.store.add(record2);
}
}
};



//delete multiselect item
var delete_multiselect = function(ms) {
ms.store.removeAll();
};

Daniil
Jun 01, 2012, 10:42 AM
Hi,

Please read:
http://forums.ext.net/showthread.php?18358&p=79239&viewfull=1#post79239

There are much more breaking changes between 0.8 and 2.0 versions.

I have prepared the example which, I hope, will help you to start.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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 v2 Example</title>

<script type="text/javascript">
var move = function () {
var tree = App.TreePanel1,
multiSelect = App.MultiSelect1,
store = multiSelect.getStore(),
nodes = tree.getChecked(),
record,
records = [];

Ext.each(nodes, function (node) {
records.push(
Ext.create("MultiSelectModel", {
text : node.get("text")
})
);
});

store.removeAll();
store.add(records);
multiSelect.boundList.refresh();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" Height="200">
<Root>
<ext:Node Text="Root (level 0)" Expanded="true" Checked="false">
<Children>
<ext:Node Text="Node1 (level 1)" Expanded="true" Checked="false">
<Children>
<ext:Node Text="Node1 (level 2)" Expanded="true" Checked="false">
<Children>
<ext:Node Text="Node1 (level 3)" Leaf="true" Checked="false" />
<ext:Node Text="Node2 (level 3)" Leaf="true" Checked="false" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Node2 (level 1)" Expanded="true" Checked="false">
<Children>
<ext:Node Text="Node1 (level 2)" Expanded="true" Checked="false">
<Children>
<ext:Node Text="Node1 (level 3)" Leaf="true" Checked="false" />
<ext:Node Text="Node2 (level 3)" Leaf="true" Checked="false" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>

<ext:Button runat="server" Text="Move selected">
<Listeners>
<Click Fn="move" />
</Listeners>
</ext:Button>

<ext:Panel
runat="server"
Height="200"
Width="200"
Layout="FitLayout">
<Items>
<ext:MultiSelect
ID="MultiSelect1"
runat="server"
DisplayField="text"
UseHiddenField="false">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server" Name="MultiSelectModel">
<Fields>
<ext:ModelField Name="text" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:MultiSelect>
</Items>
</ext:Panel>
</form>
</body>
</html>

hujq
Jun 02, 2012, 7:45 AM
Hi,Daniil.
Thank you very much,I have solved the technological problem using the example code which you offered!