problem with java script in generate components in code behind
Hi there
I'm generating Ext.Net component in code behind by implementing their classes.Now I'm working on building a gallery by panel and Html and Css work correctly, whereas it couldn't recognize my java script functions.
public class ExtGallery : ExtPanel
{
private string _entityName { get; set; }
public string EntityName { get; set; }
public string AdditionalDataKey { get; set; }
private string _additionalDataKey { get; set; }
public string XPath { get; set; }
public List<WebListColumn> WebListColumns { get; set; }
private ExtStore _extStore { get; set; }
private bool _frame = true;
private bool _collapsible = true;
private string _cls = "images-view";
private int _width = 800;
private bool _multiSelect = false;
private string _overItemCls = "x-view-over";
private bool _trackOver = true;
private string _itemSelector = "div.thumb-wrap";
private string _emptyText = "No images to display";
private int _pageSize = 5;
private string _prepareData = "prepareData";
private string _layout = "FitLayout";
private string _title = "panel for show images";
public ExtGallery() { }
#region Init
protected override void CreateChildControls()
{
this.ID = "Panel001";
this._entityName = EntityName;
this._additionalDataKey = AdditionalDataKey;
this.Cls = _cls;
this.Frame = _frame;
this.Width = _width;
this.Collapsible = _collapsible;
this.Layout = _layout;
this.Title = _title;
_extStore = new ExtStore(this._entityName, this._additionalDataKey);
var dataView = new Ext.Net.DataView()
{
Html =
"<Tpl>" +
"<Html>" +
"<style type='text/css' scoped>" +
"body {" +
"margin: 0;" +
"padding: 0;" +
"height: 100 %;" +
"}" +
".image-slider-wrapper {" +
"position: relative;" +
"display: block;" +
"overflow: hidden;" +
"}" +
".image-slider-wrapper figure" +
"{" +
"position: absolute;" +
"opacity: 0;" +
"transition: 1s opacity;" +
"height: 250px;" +
"width: 53%;" +
"margin: 50px 23%;" +
"}" +
".image-slider-wrapper figcaption" +
"{" +
"position: absolute;" +
"font-family: sans-serif;" +
"font-size: .8em;" +
"padding: .25em;" +
"color: #fff;" +
"background: rgba(0, 0, 0, 0.25);" +
"border-radius: 2px;" +
"}" +
".image-slider-wrapper .show {" +
"opacity: 1;" +
"position: static;" +
"transition: 1s opacity;" +
"}" +
".image-slider-wrapper img {" +
"height: 100%;" +
"width: 100%;" +
"}" +
".image-slider-wrapper .next, .image-slider-wrapper .prev {" +
"position: absolute;" +
"top: 50%;" +
"z-index: 1;" +
"opacity: .3;" +
"user-select: none;" +
"background: rgba(0, 0, 0, 0.6);" +
"font-size: 2em;" +
"margin-top: -.75em;" +
"}" +
".image-slider-wrapper .next:hover, .image-slider-wrapper .prev:hover {" +
"cursor: pointer;" +
"opacity: 1;" +
"color: white;" +
"}" +
".image-slider-wrapper .next {" +
"right: 0;" +
"padding: 17px 5px 15px 10px;" +
"margin-right: 15%;" +
"}" +
".image-slider-wrapper .prev {" +
"left: 0;" +
"padding: 15px 10px 15px 5px;" +
"margin-left: 15%;" +
"}" +
"</style>" +
"<div class='container'>" +
"<div class='image-slider-wrapper'>" +
"<figure class='show'>" +
"<img src = 'https://real-eyes.co.uk/wp-content/uploads/2016/03/bb2.jpg' />" +
"<figcaption> Image caption 1 </figcaption>" +
"</figure>" +
"<figure>" +
"<img src = 'https://real-eyes.co.uk/wp-content/uploads/2016/01/Screen-Shot-2016-01-21-at-16.17.39.png' />" +
"<figcaption> Image caption 2 </figcaption>" +
"</figure>" +
"<figure>" +
"<img src = 'https://real-eyes.co.uk/wp-content/uploads/2016/01/12417603_10153745585260708_6506013041010645592_n.j pg' />" +
"<figcaption> Image caption 3 </figcaption>" +
"</figure>" +
"<span class='prev'>" +
"<i class='fa fa-chevron-left'></i>" +
"</span>" +
"<span class='next'>" +
"<i class='fa fa-chevron-right'></i>" +
"</span> " +
"</div>" +
"</div>" +
"<script type='text/javascript'>" +
"$(document).ready(function() {" +
"console.log('start');" +
"var counter = 0;" +
"var items = $('figure');" +
"var numItems = items.length;" +
"var showCurrent = function() {" +
"var itemToShow = Math.abs(counter % numItems);" +
"items.removeClass('show');" +
"items.eq(itemToShow).addClass('show');" +
"}" +
"$('.next').on('click', function() {" +
"counter++;" +
"showCurrent();" +
"})" +
"$('.prev').on('click', function() {" +
"counter--;" +
"showCurrent();" +
"})" +
"});" +
"</Script>" +
"</html>" +
"</Tpl>",
SelectedItemCls = "Active",
Selectable = true,
ID = "ImageView001",
MultiSelect = _multiSelect,
Frame = _frame,
Cls = _cls,
StoreID = _extStore.ID,
EmptyText = _emptyText,
TrackOver = _trackOver,
OverItemCls = _overItemCls,
ItemSelector = _itemSelector,
Tpl = new XTemplate()
{
Html = "<Html>" +
"<style type='text/css' scoped>" +
"body {" +
"margin: 0;" +
"padding: 0;" +
"height: 100 %;" +
"}" +
".image-slider-wrapper {" +
"position: relative;" +
"display: block;" +
"overflow: hidden;" +
"}" +
".image-slider-wrapper figure" +
"{" +
"position: absolute;" +
"opacity: 0;" +
"transition: 1s opacity;" +
"height: 250px;" +
"width: 53%;" +
"margin: 50px 23%;" +
"}" +
".image-slider-wrapper figcaption" +
"{" +
"position: absolute;" +
"font-family: sans-serif;" +
"font-size: .8em;" +
"padding: .25em;" +
"color: #fff;" +
"background: rgba(0, 0, 0, 0.25);" +
"border-radius: 2px;" +
"}" +
".image-slider-wrapper .show {" +
"opacity: 1;" +
"position: static;" +
"transition: 1s opacity;" +
"}" +
".image-slider-wrapper img" +
"{" +
"height: 100%;" +
"width: 100%;" +
"}" +
".image-slider-wrapper .next, .image-slider-wrapper .prev {" +
"position: absolute;" +
"top: 50%;" +
"z-index: 1;" +
"opacity: .3;" +
"user-select: none;" +
"background: rgba(0, 0, 0, 0.6);" +
"font-size: 2em;" +
" margin-top: -.75em;" +
"}" +
".image-slider-wrapper .next:hover, .image-slider-wrapper .prev:hover {" +
"cursor: pointer;" +
"opacity: 1;" +
"color: white;" +
"}" +
".image-slider-wrapper .next {" +
"right: 0;" +
"padding: 17px 5px 15px 10px;" +
"margin-right: 15%;" +
"}" +
".image-slider-wrapper .prev {" +
"left: 0;" +
"padding: 15px 10px 15px 5px;" +
"margin-left: 15%;" +
"}" +
"</style>" +
"<div class='container'>" +
"<div class='image-slider-wrapper'>" +
"<figure class='show'>" +
"<img src = '{ImageURL}' />" +
"<figcaption> '{caption}' </figcaption>" +
"</figure>" +
"<span class='prev'>" +
"<i class='fa fa-chevron-left'></i>" +
"</span>" +
"<span class='next'>" +
"<i class='fa fa-chevron-right'></i>" +
"</span> " +
"</div>" +
"</div>" +
"<script type='text/javascript'>" +
"$(document).ready(function() {" +
"var counter = 0," +
"var items = $('.image-slider-wrapper figure')," +
"var numItems = $items.length;" +
"var showCurrent = function() {" +
"var itemToShow = Math.abs(counter % numItems);" +
"$items.removeClass('show');" +
"$items.eq(itemToShow).addClass('show');" +
"};" +
"$('.next').on('click', function() {" +
"counter++;" +
"showCurrent();" +
"});" +
"$('.prev').on('click', function() {" +
"counter--;" +
"showCurrent();" +
"});" +
"});" +
"</Script>" +
"</html>"
},
ItemTpl = new XTemplate()
{
Html = "<figure class='show'>" +
"<img src = '{ImageURL}' />" +
"<figcaption> '{caption}' </figcaption>" +
"</figure>"
},
};
List<AbstractComponent> listComponenet = new List<AbstractComponent>()
{
dataView
};
this.Items.Add(listComponenet);
base.CreateChildControls();
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (string.IsNullOrEmpty(this._entityName) == false)
{
EntityBase entity = EntityFactory.GetEntityByName(this._entityName, this._additionalDataKey);
entity.FormatUIObjectAfterPreRender(this.Page, this);
}
}
#endregion
}
Thanks
