I'm creating a changelog and i decided to load my changelog from .html file
I've got
Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
extend : 'Ext.window.Window',
title : 'Последние изменения на сайте',
modal : true,
height : 400,
width : 500,
resizable : false,
html: 'changes.html',
buttons: [{
text: 'Закрыть',
handler: function() {
this.up('window').close();
}
}]
});
How i can solve this ? (html: 'changes.html')
How i can load html to my window ?
There is a better solution that uses the declaration of the loader config of the panel:
loader: {
url: 'changes.html',
autoLoad: true
},
which will result in this global code.
Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
extend : 'Ext.window.Window',
title : 'Последние изменения на сайте',
modal : true,
height : 400,
width : 500,
resizable : false,
loader: {
url: 'changes.html',
autoLoad: true
},
buttons: [{
text: 'Закрыть',
handler: function() {
this.up('window').close();
}
}]
});
This is preferable, because we do not need to define a listener, nor an Ext.Ajax call.
You'd need to load the html asynchronously, then inject it into your component. So:
Ext.Ajax.request({
url: 'changes.html',
success: function(response){
// response.responseText will have your html content
// you can then feed it into your component using update()
}
});
So if you declare you component with id:
Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
extend : 'Ext.window.Window',
title : 'Последние изменения на сайте',
id: : 'my-log',
...
});
You can then do:
Ext.Ajax.request({
url: 'changes.html',
success: function(response){
Ext.getCmp('my-log').update( response.responseText );
}
});
You can `integrate' it into your panel like so:
Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
extend : 'Ext.window.Window',
title : 'Последние изменения на сайте',
id: : 'my-log',
listeners: {
'render': function()
{
Ext.Ajax.request({
url: 'changes.html',
success: function(response){
Ext.getCmp('my-log').update( response.responseText );
}
});
}
}
...
});
Notice though, that you may have issues if the returned html contains <head> tag (as the extjs page already has one).
Related
How to add listeners to components that are defined within itemTpl? For example, if I have a dataview (Ext.view.View) that is bound to a store, and I have defined itempTpl that includes a button and an image, like:
itemTpl: ['<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span>Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg"></div>',
'</div>']
how can I detect that button or image of an item is clicked? I know ho to add listeners to the item, but I would like to detect click event on some inner div or span element of an item.
In addition, I found writing these templates with html very difficult. One of the main advantages of extjs framework is claimed to be exactly hiding html part from the developer. So, I am wondering if there is some better way to display these information with dataview, like including panel or container component as an dataview item.
You can use element delegation:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'imagesStore',
model: 'Image',
data: [{
src: 'http://www.sencha.com/img/20110215-feat-drawing.png',
caption: 'Drawing & Charts'
}, {
src: 'http://www.sencha.com/img/20110215-feat-data.png',
caption: 'Advanced Data'
}, {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
caption: 'Overhauled Theme'
}, {
src: 'http://www.sencha.com/img/20110215-feat-perf.png',
caption: 'Performance Tuned'
}]
});
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
itemTpl: new Ext.XTemplate(
'<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span class="btnSpan">Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg" class="imgClass"></div>',
'</div>',
),
itemSelector: 'div.card',
emptyText: 'No images available',
listeners: {
itemClick: function (view, record, item, index, e, eOpts) {
console.log(e.target);
const classList = e.target.classList;
if (classList.contains('btn')) {
console.log('btn is clicked');
} else if (classList.contains('btnSpan')) {
console.log('Span in Button is clicked');
} else if (classList.contains('imgClass')) {
console.log('ImgClass is clicked');
}
}
},
renderTo: Ext.getBody(),
});
}
});
http://demos.telerik.com/kendo-ui/mobile/listview/pull-with-endless.html refering this demo we are creating kenolistview for our mobile application.
we are getting data form webapi in jSon, whend we try to bind data with list view it's giving errors we tried three methods but all are not working, please find code bellow and error bellow code.
<body>
<div data-role="view" data-init="mobileListViewPullWithEndless" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="left" data-icon="add" data-role="button" data-rel="modalview" href="#modalview-add"></a>
<a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
</div>
</header>
<ul id="pull-with-endless-listview">
</ul>
</div>
<div data-role="modalview" id="modalview-add" style="width: 95%; height: 12em;">
<div data-role="header">
<div data-role="navbar">
<span>Add Product</span> <a data-click="closeModalViewAdd" data-role="button" data-align="right">
Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label for="username">
Product Category:</label>
<input type="text" id="name" /></li>
</ul>
<a data-click="addNew" class="addNew" type="button" data-role="button">Add New Product</a>
</div>
<script type="text/x-kendo-tmpl" id="pull-with-endless-template">
<div class="product-item">
<h3>#:CatName#</h3>
</div>
</script>
<script>
function mobileListViewPullWithEndless(e) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://mydomain.com/api/homescreenapp/36/8c177908-be9f-4474-b036-43e8cef736b5/345/800/web",
dataType: 'JSON'
}
},
serverPaging: true,
pageSize: 2
});
$("#pull-with-endless-listview").kendoMobileListView({
dataSource: dataSource,
template: $("#pull-with-endless-template").text(),
pullToRefresh: true,
endlessScroll: true
});
$("#addNew").click(function () {
loader.show();
addProductDataSource.add({
ProductName: $("#name").val(),
UnitPrice: Math.floor((Math.random() * 10) + 1)
});
});
}
function closeModalViewAdd() {
$("#modalview-add").kendoMobileModalView("close");
}
function addNew() {
addProductDataSource.add({
ProductName: $("#name").val(),
UnitPrice: Math.floor((Math.random() * 10) + 1)
});
closeModalViewAdd();
}
var addProductDataSource = new kendo.data.DataSource({
transport: {
create: {
url: " http://mydomain.com/api/homescreenapp/36/8c177908-be9f-4474-b036-43e8cef736b5/345/800/web",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { type: "string" }
}
}
},
autoSync: true,
batch: true,
requestEnd: function () {
$("#name").val("");
}
});
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
We are getting following jSon response from our webapi
{"Categories":[{"CategoryId":"305","CatName":"Clothing","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345webMan&woman.jpg","MapUrlRewrite":"Clothing"},{"CategoryId":"306","CatName":"Shoes","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web2.jpg","MapUrlRewrite":"Shoes"},{"CategoryId":"307","CatName":"Handbags","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web3.jpg","MapUrlRewrite":"Handbags"},{"CategoryId":"308","CatName":"Accesories","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web4.jpg","MapUrlRewrite":"Accesories"},{"CategoryId":"309","CatName":"Luggage","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web5.jpg","MapUrlRewrite":"Luggage"},{"CategoryId":"310","CatName":"Jewellery","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web6.jpg","MapUrlRewrite":"Jwellery"},{"CategoryId":"344","CatName":"Eye Wear","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web7.jpg","MapUrlRewrite":"Eye-Wear"},{"CategoryId":"345","CatName":"Watches","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345web8.jpg","MapUrlRewrite":"Top-Brands"},{"CategoryId":"346","CatName":"Hot Brands","Description":"","ParentId":"0","ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Category/ResizeImage/345webHot_Brands.jpg","MapUrlRewrite":"Hot-Deals--Offers"}],"HomeBannerImages":[{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webBanner_1.jpg","BannerTitle":"Banner Clothing","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webshoes-banner_2.jpg","BannerTitle":" shoes banner","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webhandbag-banner1.jpg","BannerTitle":"handbag ","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webLuggage_2.jpg","BannerTitle":"Laggege","BannerDescription":"","CategoryId":null},{"ImageName":"http://mydomailn.com/customerassets/company36/UploadImages/Banners/ResizeImage/800webjewelry_2.jpg","BannerTitle":"jewelry","BannerDescription":"","CategoryId":null}],"CustomerLogo":"http://mydomailn.com/iconnect/Images/eapparelCustomerLogo12.png"}
Code and Error :
With above code if we bind kendoMobileListView we are getting error "Uncaught SyntaxError: Unexpected token"
if we use dataType: “json” instead of dataType: “jsonp”, I am getting error like "Uncaught TypeError: Cannot call method 'slice' of undefined"
If we use dataType: “json” instead of dataType: “json array”, it is not displaying anything in listing and even in error. It mean all things will be blank.
We have gone through with all below parameter. But still not getting any success.
dataType: 'JSONP',
jsonpCallback: 'jsonCallback',
type: 'GET',
async: false,
crossDomain: true
Please guide me on this issue, I need to bind only Category name in the list.
FYI : i cann't change webapi response as it's being used by other services of client.
Thanks,
Ashish
Kendo expects the server to return a JSON array. In your case it returns an object with a Categories property where the data array is stored. You need to tell the Kendo DataSource to pull the data from .Categories using the schema.data configuration option.
... = new DataSource({
...
schema: {
data: "Categories"
}
});
I am working with a backbone, jquery mobile, express app. Everything looks fine when the app starts and works correctly, however, when I click a link or change the url the html renders correctly but no jquery mobile magic appears. It only renders in the login part with a header and footer and format, but when the url changes and I come back, the page loses its css or jquery mobile magic.
define(['views/index', 'views/register', 'views/login', 'views/forgotpassword', 'views/profile',
'views/vinbookDoc', 'models/Account', 'models/Vinbook', 'models/vinBooksCollection'],
function(IndexView, RegisterView, LoginView, ForgotPasswordView, ProfileView,
vinbookDocView, Account, Vinbook, vinBooksCollection) {
var AppRouter = Backbone.Router.extend({
currentView: null,
routes: {
"index": "index",
"login": "login",
"desk/:id": "desk",
"profile/:id": "profile",
"register": "register",
"forgotpassword": "forgotpassword",
"vinbook/:id": "showVinbook"
},
initialize: function(){
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
},
showVinbook: function(id) {
var getCollection = new vinBooksCollection();
getCollection.url = '/accounts/me/vinbook';
this.changeView( new vinbookDocView({
collection: getCollection,
id: id
}));
getCollection.fetch();
},
changeView: function(page) {
this.currentView = page;
$(this.currentView.el).attr('data-role', 'page');
this.currentView.render();
$('body').append($(this.currentView.el));
var transition = $.mobile.defaultPageTransition;
// We don't want to slide the first page
if (this.firstPage) {
transition = 'none';
this.firstPage = false;
}
$.mobile.changePage($(this.currentView.el), {changeHash:false, transition: transition});
},
index: function() {
this.changeView(new IndexView() );
},
desk: function (id){
var model = new Account({id:id});
this.changeView(new ProfileView({model:model}));
model.fetch({ error: function(response){ console.log ('error'+JSON.stringify(response)); } });
console.log('works');
},
profile: function (id){
this.changeView(new IndexView() );
},
login: function() {
this.changeView(new LoginView());
},
forgotpassword: function() {
this.changeView(new ForgotPasswordView());
},
register: function() {
this.changeView(new RegisterView());
}
});
return new AppRouter();
});
require
require.config({
paths: {
jQuery: '/js/libs/jquery',
jQueryUIL: '/js/libs/jqueryUI',
jQueryMobile: '/js/libs/jqueryMobile',
Underscore: '/js/libs/underscore',
Backbone: '/js/libs/backbone',
models: 'models',
text: '/js/libs/text',
templates: '../templates',
jqm: '/js/jqm-config',
AppView: '/js/AppView'
},
shim: {
'jQueryMobile': ['jQuery', 'jqm' ],
'jQueryUIL': ['jQuery'],
'Backbone': ['Underscore', 'jQuery', 'jQueryMobile', 'jQueryUIL'],
'AppView': ['Backbone']
}
});
require(['AppView' ], function(AppView) {
AppView.initialize();
});
login
define(['AppView','text!templates/login.html'], function(AppView, loginTemplate) {
window.loginView = AppView.extend({
requireLogin: false,
el: $('#content'),
events: {
"submit form": "login"
},
initialize: function (){
$.get('/login', {}, function(data){});
},
login: function() {
$.post('/login', {
email: $('input[name=email]').val(),
password: $('input[name=password]').val()
},
function(data) {
console.log(data);
if (!data.error){window.location.replace('#desk/me');}
}).error(function(){
$("#error").text('Unable to login.');
$("#error").slideDown();
});
return false;
},
render: function() {
this.$el.html(loginTemplate);
$("#error").hide();
return this;
}
});
return loginView;
});
Just some more details:
When I change from page or the url to another page, a flash of the rendered website appears and then the css or design disappears.
I think this can solve your problem:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});
I hope someone can explain this to me. I have built a sencha touch 2.2.1 app and converted it to a native android app.
I have a map view that extends Ext.Map as shown below. When I remove that view, the app loads successfully on my mobile. When I integrate the view again, the mobile app first displays a white screen, then it displays the default sencha theme blue screen and stays there. Not even the loading indicator appears.
When the apk was tested in the emulator, everything works fine.
I included this line in index.html before using the map. I included it in the HEAD section. However in the sencha examples provided, it is included in the BODY section. Does it make any difference?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Here are my files:
Controller:
Ext.define('EntityApp.controller.Map', {
extend : 'Ext.app.Controller',
requires : 'Ext.device.Connection',
config : {
refs : {
map : '.mappanel'
},
control : {
map: {
initialize: 'initMap'
}
}
},
initMap: function () {
var me = this;
var gMap = me.getMap();
gMap.on('maprender', this.onMapRender, this, {single : true});
},
onMapRender: function(e) {
if (Ext.device.Connection.isOnline()) {
var latLngCoordinates = new google.maps.LatLng(<value>, <value>);
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMap().getMap()
});
this.getMap().getMap().setMapTypeId(google.maps.MapTypeId.ROADMAP);
this.getMap().setMapCenter(latLngCoordinates);
this.getMap().getMap().setZoom(17);
}
}
});
View:
Ext.define('EntityApp.view.Map', {
extend: 'Ext.Map',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Location'
},
mapOptions: {
center: !(window.google || {}).maps ? null : new google.maps.LatLng(<value>, <value>),
zoom: 17
}
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});
Even I'm also getting same error, I just add
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
tag after
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
in my index.html. It works fine. Try this.
I managed to solve the above by overriding the Ext.Map with my own data.
I also assigned a custom xtype called mymap and now I just do xtype:'mymap' and a map component loads with my custom data, as shown below:
Ext.define('App.view.Map', {
extend: 'Ext.Panel',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: [
{ docked: 'top', xtype: 'titlebar', title: 'Location' },
{ xtype: 'mymap' }
]
}
});
It seems that sencha processes the views data before the script tags in index.html. Correct me if I am wrong...
I'm using Ajax to load data.
With help of jQuery jTemplates I load data within Container. I need to apply jqtip plugin to images withing Container, but for some reason it's not working. if it outside works fine.
Any idea why it's not working? maybe give me an idea how I can debug it?
Here is my code
$.ajax({
type: "POST",
url: "/json/default.aspx/loaditems",
data: "{'parameter':'" + parameter + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
ApplyTemplate(msg);
}
});
function ApplyTemplate(msg) {
$('#Container').setTemplateURL('/scripts/template.htm', null, { filter_data: true });
$('#Container').processTemplate(msg);
}
<div id="Container">
</div>
here is content of my template.htm page
{#foreach $T.d as post}
<div class="image_wrap" style="float: left;">
<a href="{$T.post.url}">
<img width="175" src="{$T.post.profimage}" title="test" /></a>
</div>
{#/for}
here is qtip code
<script type="text/javascript">
$(function () {
$('.image_wrap img[title]').qtip({
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomMiddle'
}
},
style: {
name: 'cream',
padding: '7px 13px',
color: '#350608',
width: {
max: 250,
min: 0
},
tip: true
}
});
});
</script>
You're running your qtip logic on $(document).ready(). The problem is that because you're loading new markup after the page has loaded, the qtip logic doesn't apply to it.
Try wrapping your qtip logic inside a function, then call the function after you run your AJAX call.
Something like this:
function InitQtip() {
$('.image_wrap img[title]').qtip({
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomMiddle'
}
},
style: {
name: 'cream',
padding: '7px 13px',
color: '#350608',
width: {
max: 250,
min: 0
},
tip: true
}
});
}
// This will take care of items loaded with the page.
$(function () {
InitQtip();
}
// This will take care of new items.
$.ajax({
type: "POST",
url: "/json/default.aspx/loaditems",
data: "{'parameter':'" + parameter + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
ApplyTemplate(msg);
InitQtip();
}
});