[CLOSED] ext:DataView control hosting ext:ComboBox and other controls.
We are trying to use a <ext:DataView> control with paging, similar to this example:
https://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.
Microsoft JScript runtime error: Unable to get value of the property 'on': object is null or undefined.
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.
Microsoft JScript runtime error: Unable to get value of the property 'on': object is null or undefined.
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:
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>
