Printable View
I try to put a Dataview inisde a .tpl element of a dataview but it keeps see it as a text is there any way to tell EXT to treat the nested dataview as a EXT control not as a HTML.
also i try to draw the nested dataview inside an external div then try using innerHTML properties using javasceipt but it even did not see the HTML elements of parent dataview and keeps return null value,
any advise to fix this issue guys .....
Hi,
The role of the XTemplate is to render text (ie, html) based upon the values from a data source. It will not render/parse internal ASP.NET controls as anything other than text.
is there any work around or suggestion to handle this , im stuck now with this...
i think of use innerHMTL property of element , is there anything inside EXT like document.ready at jquery to be able to get the element inside the dataview as Javascript objects.
really your urgent help are appreciated.
Hi,
Unfortunately, there is no workaround to place DataView inside another DataView.
Could you provide more details about your requirement? Why do you need to place DataView inside DataView? What is the structure of data?
We need this information to give you suggestions.
I have two Stores (Store1: Get General Information of Person. , Store 2:Get Friend Images of the Person).
our design put the friend Images inside a Table of Person General Information.
I try to use panel , but its styling is not much easiser and we dont have that much of time.
I creat a dataView and bind the first DataStore to it, inside the .tpl of the dataview i have a td which contains the person images.
I try to use the dataview and bind the person images store to it but it is not working.
I try to put the person images dataview inside a div outside and at run time use inner HTML of property, as work around , and i failed , and by now i search ext for an event which ensure that all HTML element of the page are loaded , cause it keeps prompt me that the element i get is null.
Well, we can suggest you the following two ways.
1. Define <div> in DataView of top level. Render DataView of child level after rendering of top level DataView. Here is an example which can help you to start.
https://examples1.ext.net/#/Miscella...amic_Template/
2. Using the following extension
http://www.sencha.com/forum/showthre...ew-or-listview
im start working with it but i really need a support of sample code:
this is the first dataview:
this is the second dataview which i need to put inside the twittertoptenimages td in the first dataview:Code:1
<div id="twitterPerformance">
<img src="images/twitter.jpg" width="27" height="26" hspace="20" vspace="10" align="absmiddle" />Twitter Performance
<ext:DataView ID="DataView6" runat="server" StoreID="TwitterInsightStore" AutoHeight="true" Width="391"
MultiSelect="true" ItemSelector="td" EmptyText="No Twitter to display" Cls="boxBGFB">
<Template ID="Template9" runat="server">
<Html>
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="25" valign="bottom"> </td>
</tr>
<tpl for=".">
<tr>
<td align="center" valign="top">
<table width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" height="80" align="center" valign="top" class="newFans">{NewFollowers}<br />
<span id="newfans">New followers</span></td>
<td width="81" align="left" valign="top" class="percent" style="padding-top:20px; padding-left:4px;">{NewFollowersPercentage}% <img src="images/up.jpg" width="14" height="19" align="absmiddle" /></td>
<td width="195" align="center" class="facebookFansNumber">{TwitterFollowers}</td>
</tr>
<tr>
<td height="63" align="center" valign="top" class="newFans">{Tweets}<br />
<span id="newfans">Tweets</span></td>
<td width="100" align="left" valign="top" class="percent" style="padding-top:20px;padding-left:4px;">{TweetsPercentage}% <img src="images/up.jpg" width="14" height="19" align="absmiddle" /></td>
<td align="center" class="facebookFans">Followers</td>
</tr>
</table>
</tr>
<tr>
<td height="60" align="center" valign="middle" id="twittertoptenimages"></td>
</tr>
<tr>
<td height="60"><table width="363" border="0" align="center" cellpadding="0" cellspacing="0" class="pageView">
<tr>
<td align="left">Following:{Emotions}</td>
<td align="right">List :{Re}</td>
</tr>
</table></td>
</tr>
</tpl>
</table>
</Html>
</Template>
</ext:DataView>
</div>
Code:<div id="twitterimages">
<table width="360" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="312" class="pageFans">
<ext:DataView ID="DataView9" runat="server" StoreID="toptenfolloers" AutoHeight="true"
MultiSelect="true" OverClass="x-view-over" ItemSelector="td" EmptyText="No top ten to display">
<Template ID="Template12" runat="server">
<Html>
<tpl for=".">
<img src="{ProfileImageUrl}" hspace="3" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /
<img Width="32px" Height="32px" src="{ProfileImageUrl}" />
</tpl>
</Html>
</Template>
</ext:DataView>
<td width="48" valign="top" class="pageFans" style="padding-top:26px;"><a href="#">see all</a></td>
</tr>
</table>
</div>
your urgent reply really uppreciated.
Hi,
I can provide you with a very simplified example how it can be implemented. This is simplified to show the salt of implementation.
Please investigate.
Example
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.DataViewParent.GetStore();
store.DataSource = new object[]
{
new object[] { "Hello from parent DataView!" },
};
store.DataBind();
this.StoreChild.DataSource = new object[]
{
new object[] { "Hello from child DataView!" }
};
this.StoreChild.DataBind();
}
}
</script>
<!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 Example</title>
<script type="text/javascript">
var trick = function () {
this.refresh = this.refresh.createInterceptor(function () {
var c = Ext.getCmp("DataViewChild");
if (c) {
c.destroy();
}
this.interceptor = true;
});
this.refresh = this.refresh.createSequence(function () {
(function() {
if (!this.interceptor) {
new Ext.DataView({
id: "DataViewChild",
renderTo: "myDiv",
itemSelector: "div",
store: StoreChild,
tpl: XTemplateChild
});
} else {
this.interceptor = false;
}
}).defer(100, this);
});
}
var renderChildDataView = function(target) {
var childDataView = new Ext.DataView({
id: "DataViewChild",
renderTo: target,
itemSelector: "div",
store: StoreChild,
tpl: XTemplateChild
});
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Store ID="StoreChild" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:XTemplate ID="XTemplateChild" runat="server">
<Html>
<tpl for=".">
<div>{test}</div>
</tpl>
</Html>
</ext:XTemplate>
<ext:DataView
ID="DataViewParent"
runat="server"
AutoHeight="true"
ItemSelector="div">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<Template runat="server">
<Html>
<tpl for=".">
<div class="my-item">{test}</div>
</tpl>
<div id="myDiv"></div>
</Html>
</Template>
<Listeners>
<BeforeRender Fn="trick" Single="true" />
</Listeners>
</ext:DataView>
<ext:Button runat="server" Text="Render">
<Listeners>
<Click Handler="renderChildDataView('myDiv');" />
</Listeners>
</ext:Button>
</form>
</body>
</html>
i'm sorry to be late to reply to this forum , at all i try the solution and it is magically fit for my need , but really i have alot of questions:
1. it seems there is an event flow so you used the utility Ext function to control this flow and to control the child dataview object , it is enter twice to interceptor function and twice to sequence function, can you post this event flow, or even any documentation related this event flow?
2.also is there ability to use the XTemplate to be rendered to an HTML element inside dataview rather than a Dataview?
3.is there any ebook in the market we can bought you advise to increase our learning curve, regards dealing with ext framework(objects , event flow etc....?
wait your quick response.
Hi,
Yes, it's possible and more simple than rendering a child DataView.Quote:
Originally Posted by farisqadadeh
Example
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.DataViewParent.GetStore();
store.DataSource = new object[]
{
new object[] { "Hello from parent DataView!" },
};
store.DataBind();
this.StoreChild.DataSource = new object[]
{
new object[] { "1 Hello from child!" },
new object[] { "2 Hello from child!" }
};
this.StoreChild.DataBind();
}
}
</script>
<!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 Example</title>
<script type="text/javascript">
var trick = function () {
this.refresh = this.refresh.createSequence(function () {
renderChild.defer(100, this, [Ext.get("myDiv")]);
});
}
var renderChild = function (target) {
XTemplateChild.overwrite(target, StoreChild.getRecordsValues());
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Store ID="StoreChild" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:XTemplate ID="XTemplateChild" runat="server">
<Html>
<tpl for=".">
<div>{test}</div>
</tpl>
</Html>
</ext:XTemplate>
<ext:DataView
ID="DataViewParent"
runat="server"
AutoHeight="true"
ItemSelector="div">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<Template runat="server">
<Html>
<tpl for=".">
<div class="my-item">{test}</div>
</tpl>
<div id="myDiv"></div>
</Html>
</Template>
<Listeners>
<BeforeRender Fn="trick" Single="true" />
</Listeners>
</ext:DataView>
<ext:Button runat="server" Text="Render new data">
<Listeners>
<Click Handler="StoreChild.getAt(0).set('test', 'new 1');
StoreChild.getAt(1).set('test', 'new 2');
DataViewParent.refresh();" />
</Listeners>
</ext:Button>
</form>
</body>
</html>