PDA

View Full Version : [CLOSED] dataview templating throwing numerous exception



RCM
Mar 08, 2012, 7:45 PM
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.



<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;
}

Vladimir
Mar 08, 2012, 8:12 PM
Hi,

You have incorrect ItemSelector, ItemSelector must reference to the item from main tpl tag because it corresponds real record(but you reference to item from sub tpl)

You have to reference to first div after '<tpl for="." >'
See
http://examples2.ext.net/#/DataView/Advanced/Grouping/

RCM
Mar 08, 2012, 8:55 PM
Thank you. Its works well now.