PDA

View Full Version : [CLOSED] Sorting GridPanel / TreePanel without using Store



martin.mosimann
Oct 29, 2013, 5:49 PM
Hi,

is it possible to set and indicate the sorted column/field of a GridPanel or TreePanel without using a Store? e.g. when rendering the nodes of a TreePanel directly from Code-Behind.

Thanks for your help,
Martin

Baidaly
Oct 29, 2013, 11:22 PM
Hello!

Sorry, I don't quite understand you. GridPanel and TreeGrid use Store even you don't declare it, like in this sample: http://examples2.ext.net/#/TreePanel/Advanced/TreeGrid/

However, probably I misunderstood you. Could you provide your scenario with more details?

martin.mosimann
Oct 30, 2013, 1:20 AM
The example you provided is kind of what I'm looking for.

How would you set the default sort field in this TreePanel? How is the Store accessible when it's not explicitly declared?

Baidaly
Oct 30, 2013, 2:57 AM
You should declare the Store and use its DataSorters like in the sample below. Also, there is a bug related to sorting: http://forums.ext.net/showthread.php?25431&p=112185&viewfull=1#post112185


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

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

<!DOCTYPE html>

<html>
<head runat="server">
<script>
var formatHours = function (v) {
if (v < 1) {
return Math.round(v * 60) + " mins";
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + "h " + Math.round(min * 60) + "m";
} else {
return v + " hour" + (v === 1 ? "" : "s");
}
};

var handler = function(grid, rowIndex, colIndex, actionItem, event, record, row) {
Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:TreePanel
runat="server"
Title="Core Team Projects"
Width="500"
Height="300"
Collapsible="true"
UseArrows="true"
RootVisible="false"
MultiSelect="true"
SingleExpand="true"
FolderSort="true">
<Store>
<ext:TreeStore runat="server" SortOnLoad="True">
<Sorters>
<ext:DataSorter Property="task" Direction="ASC" />
</Sorters>
<Fields>
<ext:ModelField Name="task" />
<ext:ModelField Name="user" />
<ext:ModelField Name="duration" />
<ext:ModelField Name="done" Type="Boolean" />
</Fields>
</ext:TreeStore>
</Store>
<ColumnModel>
<Columns>
<ext:TreeColumn
runat="server"
Text="Task"
Flex="2"
Sortable="true"
DataIndex="task" />
<ext:TemplateColumn
runat="server"
Text="Duration"
Flex="1"
Sortable="true"
DataIndex="duration"
Align="Center">
<Template runat="server">
<Html>
{duration:this.formatHours}
</Html>
<Functions>
<ext:JFunction Name="formatHours" Fn="formatHours" />
</Functions>
</Template>
</ext:TemplateColumn>
<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" />
<ext:ActionColumn runat="server"
Text="Edit"
Width="40"
MenuDisabled="true"
Align="Center">
<Items>
<ext:ActionItem Tooltip="Edit task" Icon="PageWhiteEdit" Handler="handler">
<IsDisabled Handler="return !record.data.leaf;" />
</ext:ActionItem>
</Items>
</ext:ActionColumn>
</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" Expanded="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" />
<ext:ConfigItem Name="duration" Value="12" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" />
<ext:ConfigItem Name="duration" Value="6.5" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Icon="Folder">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Paint bedroom" Mode="Value" />
<ext:ConfigItem Name="duration" Value="2.75" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Ceiling" Mode="Value" />
<ext:ConfigItem Name="duration" Value="1.25" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Walls" Mode="Value" />
<ext:ConfigItem Name="duration" Value="1.5" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Decorate living room" Mode="Value" />
<ext:ConfigItem Name="duration" Value="2.75" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
<ext:ConfigItem Name="done" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Fix lights" Mode="Value" />
<ext:ConfigItem Name="duration" Value="0.75" />
<ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
<ext:ConfigItem Name="done" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:Node>
<ext:Node Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="task" Value="Reattach screen door" Mode="Value" />
<ext:ConfigItem Name="duration" Value="2" />
<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>