PDA

View Full Version : [CLOSED] ext:DataView control hosting ext:ComboBox and other controls.



alscg
Jan 17, 2013, 7:23 PM
We are trying to use a <ext:DataView> control with paging, similar to this example:
http://examples2.ext.net/#/DataView/Basic/With_Paging/
The issue is we want to place a <EXT:ComboBox> control below the image. We are unable to fiqure out how to host a <EXT:ComboBox> or control as it appears <Tbl> only supports HTML markup.

If this control only supports HTML, then what control could we use to achieve what I described above.

Baidaly
Jan 17, 2013, 9:38 PM
Hello!

Try to use the following sample. You can just replace the code of example from Ext.NET sources (trunk\Ext.Net.Examples\Examples\DataView\Basic\Wi th_Paging) with the code of this sample.



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

<%@ Import Namespace="System.Collections.Generic" %>

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

<script runat="server">
private object TestData
{
get
{
return new object[]
{
new object[] { "AL", "Alabama", "The Heart of Dixie" },
new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
new object[] { "AZ", "Arizona", "The Grand Canyon State" }
};
}
}

protected void Page_Load(object sender, EventArgs e)
{
string path = Server.MapPath("../../Shared/images/thumbs");
string[] files = System.IO.Directory.GetFiles(path);

List<object> data = new List<object>(files.Length);

foreach (string fileName in files)
{
System.IO.FileInfo fi = new System.IO.FileInfo(fileName);
data.Add(new { name = fi.Name,
url = "../../Shared/images/thumbs/" + fi.Name,
size = fi.Length,
lastmod = fi.LastAccessTime });
}

this.Store1.DataSource = data;
this.Store1.DataBind();
}

</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>DataView with Paging - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" />

<ext:XScript runat="server">
<script>
var prepareData = function (data) {
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
data.dateString = Ext.Date.format(data.lastmod, "m/d/Y g:i a");

return data;
};

var selectionChanged = function (dv,nodes) {
var l = nodes.length,
s = l != 1 ? 's' : '';

#{ImagePanel}.setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
};
</script>
</ext:XScript>

<style>
.images-view .x-panel-body {
background: white;
font: 11px Arial, Helvetica, sans-serif;
}
.images-view .thumb {
background: #dddddd;
padding: 3px;
}
.images-view .thumb img {
height: 60px;
width: 80px;
}
.images-view .thumb-wrap {
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
text-align:center;
}
.images-view .thumb-wrap span {
display: block;
overflow: hidden;
text-align: center;
}

.images-view .x-view-over {
border:1px solid #dddddd;
background: #efefef url(../../Shared/images/row-over.gif) repeat-x left top;
padding: 4px;
}

.images-view .x-item-selected {
background: #eff5fb url(../../Shared/images/selected.gif) no-repeat right bottom;
border:1px solid #99bbe8;
padding: 4px;
}
.images-view .x-item-selected .thumb {
background:transparent;
}

.images-view .loading-indicator {
font-size:11px;
background-image :url(../../Shared/images/loading.gif);
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
margin:10px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>DataView Example with paging</h1>

<ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true" ID="ComboBoxStore">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="name" />
<ext:ModelField Name="slogan" />
</Fields>
</ext:Model>
</Model>

<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>

<ext:Panel
runat="server"
ID="ImagePanel"
Cls="images-view"
Frame="true"
Width="535"
Collapsible="true"
Title="Simple DataView (0 items selected)">
<Items>
<ext:DataView
runat="server"
MultiSelect="true"
OverItemCls="x-view-over"
TrackOver="true"
ItemSelector="div.thumb-wrap"
EmptyText="No images to display">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="5">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="name" />
<ext:ModelField Name="url" />
<ext:ModelField Name="size" Type="Int" />
<ext:ModelField Name="lastmod" Type="Date" />
</Fields>
</ext:Model>
</Model>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
</AutoLoadParams>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<tpl for=".">
<div class="thumb-wrap" id="{name}">
<div class="thumb"><img src="{url}" title="{name}"></div>
<span class="x-editable">{shortName}</span>
<combobox id="combobox-{name}">
</combobox>
</div>
</tpl>
<div class="x-clear"></div>
</Html>
</Tpl>
<PrepareData Fn="prepareData" />
<Listeners>
<SelectionChange Fn="selectionChanged" />
<Refresh Handler="
Ext.get(this.getNodes()).each(function(i) {
var placeholder = i.el.child('combobox');
var selectedValue = null;
if (Ext.ComponentManager.get(placeholder.id) !== undefined) {
var combo = Ext.ComponentManager.get(placeholder.id);
selectedValue = combo.getValue();
combo.destroy();
placeholder = i.el.appendChild({ tag: 'combobox', id: placeholder.id });
}

Ext.create('Ext.form.field.ComboBox', {
renderTo: placeholder,
id: placeholder.id,
width:80,
forceSelection:true,
queryMode:'local',
triggerAction:'all',
store: 'ComboBoxStore',
displayField: 'name',
valueField: 'abbr',
value: selectedValue
});
})
this.updateLayout();
"></Refresh>
</Listeners>
</ext:DataView>
</Items>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="Store1" HideRefresh="true" />
</BottomBar>
</ext:Panel>
</form>
</body>
</html>

Daniil
Jan 18, 2013, 5:16 AM
Hi everybody,

Just to clarify. Yes, you can put any HTML to Tpl as @Baidaly demonstrated. Nothing stops you to put "ComboBox HTML" into.

But yes, Tpl doesn't support components to be put into.

alscg
Jan 21, 2013, 3:41 PM
Hello, thank you for your post. We need to get this working. The code is bombing on the first JavaScript reference to 'combobox'. It raises a JavScript error of:

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'child': object is null or undefined

The code is below. Please advise as we need to host this combo box ion the <EXT:DataView>.

Thank You.


Ext.get(this.getNodes()).each(function(i) {
ERROR IS HERE -->var placeholder = i.el.child('combobox');
var selectedValue = null;
if (Ext.ComponentManager.get(placeholder.id) !== undefined) {
var combo = Ext.ComponentManager.get(placeholder.id);
selectedValue = combo.getValue();
combo.destroy();
placeholder = i.el.appendChild({ tag: 'combobox', id: placeholder.id });
}




0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'child': object is null or undefined

Baidaly
Jan 21, 2013, 5:29 PM
Hello!

Try to use the following:



<ext:DataView
runat="server"
MultiSelect="true"
OverItemCls="x-view-over"
TrackOver="true"
ItemSelector="div.thumb-wrap"
EmptyText="No images to display">
<Store>
<ext:Store ID="Store1" runat="server" PageSize="5">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="name" />
<ext:ModelField Name="url" />
<ext:ModelField Name="size" Type="Int" />
<ext:ModelField Name="lastmod" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<tpl for=".">
<div class="thumb-wrap" id="{name}">
<div class="thumb"><img src="{url}" title="{name}"></div>
<span class="x-editable">{shortName}</span>
<div id="combobox-{name}">
</div>
</div>
</tpl>
<div class="x-clear"></div>
</Html>
</Tpl>
<PrepareData Fn="prepareData" />
<Listeners>
<SelectionChange Fn="selectionChanged" />
<Refresh Handler="
Ext.get(this.getNodes()).each(function(i) {
var placeholder = i.el.dom.children[2];
var selectedValue = null;
if (Ext.ComponentManager.get(placeholder.id) !== undefined) {
var combo = Ext.ComponentManager.get(placeholder.id);
selectedValue = combo.getValue();
combo.destroy();
placeholder = i.el.appendChild({ tag: 'div', id: placeholder.id });
}

Ext.create('Ext.form.field.ComboBox', {
renderTo: placeholder,
id: placeholder.id,
width:80,
forceSelection:true,
queryMode:'local',
triggerAction:'all',
store: 'ComboBoxStore',
displayField: 'name',
valueField: 'abbr',
value: selectedValue
});
})
this.updateLayout();
"></Refresh>
</Listeners>
</ext:DataView>

alscg
Jan 22, 2013, 3:32 PM
Javascript is still not identifying the i.el or i.el.dom. Please try to provide further assistance. The screenshots of the error is attached.

Vladimir
Jan 22, 2013, 4:39 PM
Try this Refresh handler


Ext.each(this.getNodes(), function(i) {
var placeholder = i.children[2];
var selectedValue = null;
if (Ext.ComponentManager.get(placeholder.id) !== undefined) {
var combo = Ext.ComponentManager.get(placeholder.id);
selectedValue = combo.getValue();
combo.destroy();
placeholder = Ext.fly(i).appendChild({ tag: 'div', id: placeholder.id });
}

Ext.create('Ext.form.field.ComboBox', {
renderTo: placeholder,
id: placeholder.id,
width:80,
forceSelection:true,
queryMode:'local',
triggerAction:'all',
store: 'ComboBoxStore',
displayField: 'name',
valueField: 'abbr',
value: selectedValue
});
})
this.updateLayout();

alscg
Jan 22, 2013, 7:26 PM
Hello, I was able to get past the error but now am receiving this error:
Microsoft JScript runtime error: Unable to get value of the property 'on': object is null or undefined.

What does this error mean? How could we get past it? This is very important.

Vladimir
Jan 22, 2013, 8:54 PM
Please post a sample reproduces the issue

alscg
Jan 22, 2013, 9:11 PM
I was clear on the behavior. I pasted your code into the refresh handler and now receive this error:

Microsoft JScript runtime error: Unable to get value of the property 'on': object is null or undefined.

We are using V2. Please check our account to confirm code versions based on your reply. I need a resolution on this. This software is not documented well for these kind of issues. Please provide more time and imput before you respond.

Here is the code:


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Import Namespace="Ext.Net.Utilities" %>

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



<asp:Content ID="CntTitle" ContentPlaceHolderID="TitleContent" runat="server">
empower - Widget Library
</asp:Content>

<asp:Content ID="CntMainPage" ContentPlaceHolderID="MainContent" runat="server" class="off-canvas hide-extras">
<ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true" ID="ComboBoxStore">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="name" />
<ext:ModelField Name="slogan" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>

<ext:Panel
runat="server"
ID="WidgetPanel"
Cls="images-view"
Frame="true"
AutoHeight="true"
Width="1000"
Collapsible="true"
Layout="Fit"
Title="Widget Library (0 selected)">
<TopBar>
<ext:Toolbar ID="WidgetDataViewToolBar" runat="server" Height="30px">
<Items>
<ext:TextField ID="txtField" runat="server"
FieldLabel="Filter"
Width="150"
LabelAlign="Right"
LabelWidth="35">
<Listeners>
<Change Handler="var dataview = App.MainContent_WidgetPanel.down('dataview'),
store = dataview.store;
store.suspendEvents();
store.clearFilter();
dataview.getSelectionModel().clearSelections();
store.resumeEvents();
store.filter({
property: 'Title',
anyMatch: true,
value : newValue
});"
Buffer="50" />
</Listeners>
</ext:TextField>

<ext:ToolbarSpacer ID="ToolbarSpacer" runat="server" Height="30px" />

<ext:ComboBox ID="CmbWidgets" runat="server"
FieldLabel="Sort By"
LabelAlign="Right"
LabelWidth="45"
Width="150"
Editable="false">
<Items>
<ext:ListItem Text="Name" Value="Title" />
<ext:ListItem Text="ID" Value="Id" />
</Items>
<Listeners>
<Select Handler="App.MainContent_WidgetPanel.down('dataview').store .sort(this.getValue());" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:DataView ID="WidgetDataView"
runat="server"
AutoHeight="true"
MultiSelect="false"
OverItemCls="x-view-over"
TrackOver="true"
ItemSelector="div.thumb-wrap"
EmptyText="No widgets to display">
<Store>
<ext:Store ID="WidgetStore" runat="server" PageSize="8">
<Model>
<ext:Model ID="WDVModel" runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="Title" />
<ext:ModelField Name="ImageUrl" />
<ext:ModelField Name="Description" />
<%--<ext:ModelField Name="DashboardLst" />--%>
</Fields>
</ext:Model>
</Model>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
</AutoLoadParams>
</ext:Store>
</Store>

<Tpl ID="WTemplate" runat="server">

<Html>
<tpl for='.'>
<div class='thumb-wrap'>
<h3 style='height:20px'> {Title} </h3>
<img src='../{ImageUrl}' alt='{Title}'/>
<div class='row cleafix'>
<combobox id='combobox-{name}'></combobox>
<%--<select id='select{Id}' runat='server'>
{DashboardLst}
</select>--%>
<button onClick='GetSelectedItem({Id},select{Id});'>Save</button>
<p> {Description} </p>
</div>
</div>
</tpl>
<div class='x-clear'></div>"
</Html>

</Tpl>

<PrepareData Fn="prepareData" />
<Listeners>
<SelectionChange Fn="selectionChanged" />
<Refresh Handler="
Ext.each(this.getNodes(), function(i)
{
debugger;
var placeholder = i.children[2];
var selectedValue = null;
if (Ext.ComponentManager.get(placeholder.id) !== undefined) {
var combo = Ext.ComponentManager.get(placeholder.id);
selectedValue = combo.getValue();
combo.destroy();
placeholder = Ext.fly(i).appendChild({ tag: 'div', id: placeholder.id });
}
Ext.create('Ext.form.field.ComboBox', {
renderTo: placeholder,
id: placeholder.id,
width:80,
forceSelection:true,
queryMode:'local',
triggerAction:'all',
store: 'ComboBoxStore',
displayField: 'name',
valueField: 'abbr',
value: selectedValue
});
})
this.updateLayout();
">
</Refresh>
</Listeners>

</ext:DataView>
</Items>
<DockedItems>
</DockedItems>
<BottomBar>
<ext:PagingToolbar ID="WidgetPageingToolBar" runat="server" StoreID="WidgetStore" HideRefresh="true" Height="30" />
</BottomBar>
</ext:Panel>
</asp:Content>

<asp:Content ID="CntScript" ContentPlaceHolderID="ScriptsSection" runat="server">

<script runat="server">
private object TestData
{
get {
return new object[] {
new object[] { "AL", "Alabama", "The Heart of Dixie" },
new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
new object[] { "AZ", "Arizona", "The Grand Canyon State" }
};
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.WidgetStore.DataSource = ExtDashboard.Models.WidgetModels.GetAllWidgets();
this.WidgetStore.DataBind();
}
}
</script>

<script type="text/javascript">
function GetSelectedItem(widgetId, value) {
var e = document.getElementById(value);
var e = value;

jQuery.ajax({

url: "/Home/UpdateDashboard",
type: "POST",
traditional: true,
data: {
"widgetId": widgetId,
"dashboardId": e.options[e.selectedIndex].value,
},
dataType: "json",
async: false,
success: OnSuccess,
error:OnError
});

function OnSuccess(result) {
alert("Widget assign to dashboard successfully.");
}

function OnError(result){
alert("Widget assign to dashboard successfully." + result.statusText);
}
}
</script>

<ext:XScript ID="XScript1" runat="server">
<script>
var prepareData = function (data) {

data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
data.dateString = Ext.Date.format(data.lastmod, "m/d/Y g:i a");
return data;
};

var selectionChanged = function (dv,nodes) {
var l = nodes.length,
s = l != 1 ? 's' : '';
if(nodes.length>0)
#{WidgetPanel}.setTitle('Widget Library (' + nodes[0].data.Title + ' selected)');
};

</script>
</ext:XScript>

<style>
.x-panel-default-framed {
margin-left: 20px;
}

.content_container {
width: 76% !important;
}

.x-docked-top .x-field-default-toolbar {
top: -6px !important;
}

.x-docked-top .x-field-default-toolbar table {
margin-top: -9px !important;
}

.x-docked-top .x-field-default-toolbar input {
padding: 2px;
width: 84px !important;
}

.x-docked-top .x-field-default-toolbar .x-form-arrow-trigger {
margin-left: 23px;
}

.thumb-wrap h3 {
font-size: 13px;
font-weight: bold;
margin: 5px 0px;
text-align: left;
}

.thumb-wrap select {
width: 178px !important;
}

.thumb-wrap p {
padding: 0px 15px !important;
font-size: 12px;
font-weight: normal;
text-align: justify;
margin-bottom: 0px;
}

.thumb-wrap img {
border: 1px solid silver;
display: block;
margin: 5px 0;
width: 100%;
}

.images-view .x-panel-body {
background: white;
font: 11px Arial, Helvetica, sans-serif;
}

.images-view .thumb {
background: #dddddd;
padding: 3px;
}

.images-view .thumb img {
height: 60px;
width: 80px;
}

.images-view .thumb-wrap {
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
text-align: center;
width: 240px;
}

.images-view .thumb-wrap span {
display: block;
overflow: hidden;
text-align: center;
}

.images-view .x-view-over {
border: 1px solid #dddddd;
background: #efefef url(../../Shared/images/row-over.gif) repeat-x left top;
padding: 4px;
}

.images-view .x-item-selected {
background: #eff5fb url(../../Shared/images/selected.gif) no-repeat right bottom;
border: 1px solid #99bbe8;
padding: 4px;
}

.images-view .x-item-selected .thumb {
background: transparent;
}

.images-view .loading-indicator {
font-size: 11px;
background-image: url(../../Shared/images/loading.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 20px;
margin: 10px;
}

.x-field.x-tbar-page-number.x-form-item.x-box-item.x-toolbar-item.x-field-default-toolbar.x-hbox-form-item td {
background-color: #F5F5F5 !important;
padding: 0 !important;
}

.x-field.x-tbar-page-number.x-form-item.x-box-item.x-toolbar-item.x-field-default-toolbar.x-hbox-form-item {
top: 12px !important;
}

.x-toolbar .x-toolbar-text {
font-size: 14px !important;
}

.x-nlg.x-toolbar-default {
background-image: none !important;
background-color: #F5F5F5 !important;
}

.x-toolbar.x-docked.x-toolbar-default.x-docked-bottom.x-toolbar-docked-bottom.x-toolbar-default-docked-bottom.x-box-layout-ct {
background-image: none !important;
background-color: #F5F5F5 !important;
}

.x-toolbar-docked-bottom .x-box-inner {
top: -9px;
height: 34px !important;
}

.x-toolbar-docked-bottom .x-box-inner input {
padding: 2px;
text-align: center;
}
</style>


</asp:Content>

Daniil
Jan 23, 2013, 3:59 AM
In the future please use [CODE ] tags to wrap the code.
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)

Is the MasterPage required to reproduce the problem? If no, please remove the dependence from the MasterPage.

Is jQuery required?

Generally, we need a sample which we can copy, paste and run. Please simplify as much as you can.

This technique commonly helps to prepare a sample.
How to prepare a sample (http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687)

Thank you.

Rajkumar Jain
Jan 23, 2013, 11:13 AM
Dear Ext.Net Team ,

I try it without master page also , however its not behave properly . I used this with DataView with paging on first page its not showing any combobox , next page its showing all combobox . when I comeback to first page only first image showing combo , again go to next page all combo go disappear .

Daniil
Jan 23, 2013, 1:35 PM
Hello,

Thank you for the details.

But it is hard to say anything concrete without a sample to reproduce. Please provide.

Also when you will have a chance, please read these guides.
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)
More Information Required (http://forums.ext.net/showthread.php?10205)

Baidaly
Jan 23, 2013, 10:12 PM
Hello!

Please, can you update from the trunk and try again? Because it works fine with it.

Please note that you can get the latest sources here:
http://svn.ext.net/premium/trunk/