Is there any way to make something like the following?
var template=new Ext.XTemplate(
'<tpl for=".">',
'<div>'
'<span>This is a Test number {id}</span>'
'<script>doSomething()</script>',
'</div>',
'</tpl>');
By doing that, i just receive the HTML with the script tags, but they are not executed. Any idea?
If you want to run javascript code while generating html by template, you can do the following:
var template=new Ext.XTemplate(
'<tpl for=".">',
'<div>'
'<span>This is a Test number {id}</span>'
'{[this.doSomething()]}',
'</div>',
'</tpl>',
{
doSomething: function(){}
});
Related
I created 2 Vue components:
Vue.component('vimeo', {
template: '<iframe src="https://player.vimeo.com/video/' + this.videoId + '" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
props: ['videoId']
});
Vue.component('videos', {
template: '<div id="videos">' +
'<div v-for="videoId in videoIds">' +
'<vimeo :video-id="videoId"></vimeo>' +
'</div>' +
'</div>',
computed: {
videoIds: function() {
return store.state.videoIds;
}
}
});
However, the this.videoId is always undefined in the 'vimeo' component template. If I change the template to:
<h1>{{ videoId }}</h1>
the prop value can be displayed properly.
I have searched the internet for solutions to this, but unfortunately, I have not got any.
The code you have is basically trying to use this.videoId at the time of the template definition, before any components have been initialized.
Instead what you'll have to do is bind the videoId value so that it is translated at render time. I would do this with a computed property since you need to concatenate the vimeo URL prefix.
Something like:
computed: {
videoUrl() { return 'https://player.vimeo.com/video/' + this.videoId; }
},
template: '<iframe :src="videoUrl" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
Note the colon in :src for the dynamic binding. See the docs for more info on this.
I have a view that generates some HTML. I want part of this HTMl to be clickable and execute a function when it is tapped.I can get this to work using a Sencha Touch button item but is it possible to reference and use an HTML element instead?
Here is my code.
View
Ext.define('myApp.view.ScheduleDetails', {
extend: 'Ext.Panel',
xtype: 'ScheduleDetails',
config: {
title: '<span class="logo"></span>',
styleHtmlContent: true,
scrollable: 'vertical',
tpl: [
'<img src="{image}" width="100%" class="mh"/>',
'<div class="dark-overlay">',
'<h1>{title}</h1>',
'<h3>{description}</h3>',
'<h1>{time}</h1>',
'</div>',
'<div class="actions">',
'<div class="actions-left check-in" id="checkin">',
'Check-in',
'</div>',
'<div class="actions-right map">',
'Map',
'</div>',
'</div>',
'<div class="schedule-details">',
'<p>{longdesc}</p>',
'</div>'
].join("")
}
});
Controller
Ext.define('myApp.controller.ScheduleDetails', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'ScheduleDetails',
'checkinbutton': '.actions #check-in'
},
control: {
'.x-button #checkin': {
tap: 'showPage'
},
'checkinbutton': {
tap: 'showPage'
}
}
},
showPage: function(){
console.log('Callback');
}
});
Any help would be great, Thanks.
The proper way of doing this is to subscribe to events for particular element from the DOM. But the trick is where to do this - you can't just specify reference to such elements in controller. Because at the time this file is executed your element is not yet rendered.
You need to wait for your panel to be rendered and then find particular DOM element and subscribe to its events.
Yes, this is possible. You can use itemTap, this example can come in handy: http://www.mysamplecode.com/2012/05/sencha-touch-list-button-example.html
look at the controller that they use.
I am working in extjs4. I have tpl view for displaying questions and multiple options as-
Ext.define('Balaee.view.qb.qbqns.QbqnsReview', {
extend: 'Ext.view.View',
id: 'qbqnsViewId',
alias: 'widget.QbqnsReviewView',
height: 500,
store: 'qb.QbqnsStore',
autoScroll: true,
config: {
tpl: '<tpl for=".">' +
'<div id="main">' +
'</br>' +
'<h1 id="q">Question :-</h1> {question}</br>' +
'<tpl for="options">' +
'<tpl if="parent.Correctoption==optionId">' +
'<p style="color:Green"><input type="radio" name="{option}">{option}</p>' +
'<tpl elseif="parent.UsersOption==optionId">' +
'<p style="color:Red"><input type="radio" name="{option}">{option}</p>' +
'<tpl else>' +
'<p><input type="radio" name="{optionId}" value="{option}"> {option}</p>' +
'</tpl>' +
'</tpl>' +
'<p>---------------------------------------------------------</p>' +
'</div>' +
'</tpl>',
itemSelector: 'div.main'
}
});
Its working correctly. its displaying 20 questions and its related options correctly. I want to add tabindex property to it. i.e. if user solved question and press the tab button then focus should go to next question. So how to add tab access functionality to tpl in extjs4
You should be able to add tabindex property on elements in your template:
http://www.w3schools.com/tags/att_global_tabindex.asp
I have implemented an application in sencha touch.
in that i have a list view , i retrieve the data from the store,
in data base in some fields i have inserted null values,{No selection}.
the corresponding fields in list view are displayed as NULL,
But i want to display an empty space instead of NULL,
{
xtype: 'list',
itemTpl: [
'<div id="wrapper">'+
'<div class="frt">{Name}</div>'+
'<div class="frt">{Title}</div>'+
'<div class="frt">{Contact}</div>'+
'<div class="frt">{Zip}</div>'+
'</div>'
],
store: 'ContactsDataBase'
}
{
xtype: 'list',
itemTpl: [
'<div id="wrapper">'+
'<div class="frt"><tpl if="Name != null">{Name}</tpl></div>'+
'<div class="frt"><tpl if="Title != null">{Title}</tpl></div>'+
'<div class="frt">{Contact}</div>'+
'<div class="frt">{Zip}</div>'+
'</div>'
],
store: 'ContactsDataBase'
}
Visit Sencha Touch docu site for more information.
Cheers, Oleg
A slight modified version
itemTpl: [
'<div id="wrapper">'+
'<div class="frt"><tpl if="values.Name">{Name}</tpl></div>'+
'<div class="frt"><tpl if="values.Title">{Title}</tpl></div>'+
'<div class="frt">{Contact}</div>'+
'<div class="frt">{Zip}</div>'+
'</div>'
]
I am using extjs 4 with rails 3. I have a form containing a combobox and a dataview. On selection of any item of combobox, an image should be displayed in the dataview from the database. I tried using tpl for static image which works fine. But how to retrive the same dynamically??
Code of dataview and template ::
{
xtype: 'dataview',
store: 'MyStore',
id:'viewer',
autoHeight:true,
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
fieldLabel: 'Choose State',
emptyText: 'No images available'
},
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="thumb-wrap">',
'<img src="/images/rails.png" align="right" />',
'</div>',
'</tpl>'
);
Any suggestions??
Thanks!
(First: the 'MyStore' is probably not a string but a reference to a real ExtJS data store. You probably do not need the quotes)
The data store contains a list of items of some model. You can read the fields of that model in your template, by putting the field name between accolades { }.
Assuming a model with an 'url' field, the template becomes this:
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="thumb-wrap">',
'<img src="/images/{url}" align="right" />',
'</div>',
'</tpl>'
);
Try this tutorial for more information: http://www.sencha.com/learn/legacy/Tutorial:Getting_Started_with_Templates