Mar 08, 2012, 6:45 PM
[CLOSED] dataview templating throwing numerous exception
I have a dataview created using the code below. its is throwing exceptions even though its rendering. How can I get rid of the exceptions.
The Model is shown below
The code is failing in the javascript code below. and when I continue and stepout of the code. The icons are rendered in the dataview. I want to resolve the issue whey the exception are happening. the data structure is fine as it is rendering.
Then when an item is clicked. it throws another exception at
<ext:Panel
ID="homePanel"
runat="server"
Cls="items-view"
Layout="fit"
Border="false">
<Items>
<ext:DataView
runat="server"
SingleSelect="true"
OverClass="x-view-over"
ItemSelector="div.item-wrap" ID="DVHomeMenu" IDMode="Explicit" LoadMask="false"
>
<Store>
<ext:Store runat="server" AutoLoad="true" ID="HomeMenuStore" IDMode="Explicit">
<Proxy>
<ext:AjaxProxy Url='<%# Html.GetUrl("Personalize","UserSetting", "GetWorkManagementPanel") %>' AutoDataBind="true">
<Reader>
<ext:JsonReader Root="">
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id" >
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Items" IsComplex="true" />
<ext:ModelField Name="Id" />
</Fields>
</ext:Model>
</Model>
<Listeners>
</Listeners>
</ext:Store>
</Store>
<Tpl ID="Tpl1" runat="server" >
<Html>
<div class="items-ct">
<tpl for="." >
<div>
<h2><div id="WorkManagementPanel" panelId="{Id}">{Name}</div></h2>
<dl>
<tpl for="Items">
<div class="item-wrap" ext:panel="{Accordion}" ext:menu="{MenuItem}">
<img src="{Icon}" class="icon"/>
<div>
<span class="title">{Title}</span>
</div>
</div>
</tpl>
<%--<div style="clear:left"></div>--%>
</dl>
</div>
</tpl>
</div>
</Html>
</Tpl>
<Listeners>
<ContainerClick Fn="HomePanel.viewClick" />
<ItemClick Fn="HomePanel.itemClick" />
</Listeners>
</ext:DataView>
viewClick: function (dv, e) {
var group = e.getTarget('h2', 3, true);
if (group) {
group.up('div').toggleCls('collapsed');
}
},
itemClick: function (view, record, item, index, e) {
var item = e.getTarget(".item-wrap");
if (item) {
Ext.Msg.alert("Click", "The node with id='" + item.id + "' has been clicked");
}
}
},
My controller is shown below public string GetWorkManagementPanel()
{
UserPanels userPanels = new UserPanels();
userPanels.Mock()
return userPanels.ToString();
}
The Model is shown below
public class UserPanels
{
public List<UserPanel> Panels { get; set; }
public UserPanels()
{
Panels=new List<UserPanel>();
}
public void Mock()
{
UserPanel panel=new UserPanel();
panel.Name = "Management";
UserPanelItem item1=new UserPanelItem(){Title = "Desk"};
UserPanelItem item2 = new UserPanelItem() { Title = "Home" };
UserPanelItem item3 = new UserPanelItem() { Title = "Report" };
UserPanelItem item4 = new UserPanelItem() { Title = "Summary" };
panel.Items.Add(item1);
panel.Items.Add(item2);
panel.Items.Add(item3);
panel.Items.Add(item4);
userPanels.Panels.Add(panel);
}
public override string ToString()
{
string json = JsonConvert.SerializeObject(Panels, Formatting.Indented);
return json;
}
}
public class UserPanel
{
public UserPanel()
{
Items = new List<UserPanelItem>();
PanelType = new PagePanelType();
Category = new PagePanelCategory();
}
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public PagePanelType PanelType { get; set; }
public PagePanelCategory Category { get; set; }
public List<UserPanelItem> Items { get; set; }
public override string ToString()
{
string json = JsonConvert.SerializeObject(this, Formatting.Indented);
return json;
}
}
public class UserPanelItem
{
public UserPanelItem()
{
Icon = "/content/images/icon.png";
}
public int PanelItemId { get; set; }
public string Title { get; set; }
public string Icon { get; set; }
public string Accordion { get; set; }
public string MenuItem { get; set; }
public override string ToString()
{
string json = JsonConvert.SerializeObject(this, Formatting.Indented);
return json;
}
}
The code is failing in the javascript code below. and when I continue and stepout of the code. The icons are rendered in the dataview. I want to resolve the issue whey the exception are happening. the data structure is fine as it is rendering.
updateIndexes : function(startIndex, endIndex) {
var ns = this.all.elements,
records = this.store.getRange(),
i;
startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
for(i = startIndex; i <= endIndex; i++){
ns[i].viewIndex = i;
>>>>>>>>>>>>>>>>>>>>>>>>>.breaks at this point. because the ns have four items and the records have one item with the four items as sub items<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
ns[i].viewRecordId = records[i].internalId;
if (!ns[i].boundView) {
ns[i].boundView = this.id;
}
}
},
Then when an item is clicked. it throws another exception at
o is undefined.
getKey : function(o){
return o.id;
}
Last edited by Daniil; Mar 09, 2012 at 6:59 AM.
Reason: [CLOSED]