Develop Reference

How to add extra element in data view while using tpl

How to add extra element in data view while using tpl.
I am using tpl with itemselector. Now I have add some extra div in that which is not coming from the store. How to add that ?
Here is my data view
onPanelLoad : function( panel , width , height , eOpts){
var mypanel = panel.query('#somepanel')[0],
imageStore = Ext.create('Ext.data.Store', {
id:'imagesStore',
model: Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
}),
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'
}]
});
var imageTpl = new Ext.XTemplate(
/* My Try
'<tpl for=".">',
'<div class="item box-wrap">',
'<div class="content-box app-category" style="width:160px; height:160px;">',
'<div class="content-item">',
'<img src="{src}" />',
'</div>',
'</div>',
'</div>',
*/
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
if(mypanel)
mypanel.add([{
layout:'vbox',
items:[{
xtype : 'dataview',
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
}]
}]);
This is what I am trying to add.
'<tpl for=".">',
'<div class="item box-wrap">',
'<div class="content-box app-category" style="width:160px; height:160px;">',
'<div class="content-item">',
'<img src="{src}" />',
'</div>',
'</div>',
'</div>',
When I am trying I am getting Uncaught TypeError: Cannot read property 'internalId' of undefined
Any work around for this?

Please take a look at the fiddle, which does not have the problem.
I added both types of itemTpl.
Please check if you are readding items, that way you might get duplicated IDs.
I added the dataview via items inside the view and tried it on the load event of the store. Both work.
Please be aware I added some styling to app.css, which should not be your problem
MORE INFO
You can load additional data to a store creating a record using the model with data.
I updated the fiddle.

Uncaught SyntaxError: Invalid or unexpected token- JQuery Calendar

I have this script that is showing me "Uncaught SyntaxError: Invalid or unexpected token" error. Funny thing is that it works flawlessly on another laptop but on the other it doesn't. It's basically a calendar.
$(document).ready(function() {
/*
==========================================================================
Fullcalendar
========================================================================== */
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev, title, next',
right: 'today agendaDay,agendaTwoDay,agendaWeek,month'
},
buttonIcons: {
prev: 'font-icon font-icon-arrow-left',
next: 'font-icon font-icon-arrow-right',
prevYear: 'font-icon font-icon-arrow-left',
nextYear: 'font-icon font-icon-arrow-right'
},
defaultDate: '2017-01-01',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-01-01'
},
{
title: 'Long Event',
start: '2017-01-07',
end: '2017-01-10',
className: 'event-green'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-01-09T16:00:00',
className: 'event-red'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-01-16T16:00:00',
className: 'event-orange'
},
{
title: 'Conference',
start: '2017-01-11',
end: '2017-01-13',
className: 'event-coral'
},
{
title: 'Meeting',
start: '2017-01-12T10:30:00',
end: '2017-01-12T12:30:00',
className: 'event-green'
},
{
title: 'Lunch',
start: '2017-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-01-12T14:30:00',
className: 'event-red'
},
{
title: 'Happy Hour',
start: '2017-01-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-01-12T20:00:00',
className: 'event-orange'
},
{
title: 'Birthday Party',
start: '2017-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-01-28',
className: 'event-coral'
}
],
viewRender: function(view, element) {
// При переключении вида инициализируем неÑтандартный Ñкролл
if (!("ontouchstart" in document.documentElement)) {
$('.fc-scroller').jScrollPane({
autoReinitialise: true,
autoReinitialiseDelay: 100
});
}
$('.fc-popover.click').remove();
},
eventClick: function(calEvent, jsEvent, view) {
var eventEl = $(this);
// Add and remove event border class
if (!$(this).hasClass('event-clicked')) {
$('.fc-event').removeClass('event-clicked');
$(this).addClass('event-clicked');
}
// Add popover
$('body').append(
'<div class="fc-popover click">' +
'<div class="fc-header">' +
moment(calEvent.start).format('dddd • D') +
'<button type="button" class="cl"><i class="font-icon-close-2"></i></button>' +
'</div>' +
'<div class="fc-body main-screen">' +
'<p>' +
moment(calEvent.start).format('dddd, D YYYY, hh:mma') +
'</p>' +
'<p class="color-blue-grey">Name Surname Patient<br/>Surgey ACL left knee</p>' +
'<ul class="actions">' +
'<li>More details</li>' +
'<li>Edit event</li>' +
'<li>Remove</li>' +
'</ul>' +
'</div>' +
'<div class="fc-body remove-confirm">' +
'<p>Are you sure to remove event?</p>' +
'<div class="text-center">' +
'<button type="button" class="btn btn-rounded btn-sm">Yes</button>' +
'<button type="button" class="btn btn-rounded btn-sm btn-default remove-popover">No</button>' +
'</div>' +
'</div>' +
'<div class="fc-body edit-event">' +
'<p>Edit event</p>' +
'<div class="form-group">' +
'<div class="input-group date datetimepicker">' +
'<input type="text" class="form-control" />' +
'<span class="input-group-addon"><i class="font-icon font-icon-calend"></i></span>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<div class="input-group date datetimepicker-2">' +
'<input type="text" class="form-control" />' +
'<span class="input-group-addon"><i class="font-icon font-icon-clock"></i></span>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<textarea class="form-control" rows="2">Name Surname Patient Surgey ACL left knee</textarea>' +
'</div>' +
'<div class="text-center">' +
'<button type="button" class="btn btn-rounded btn-sm">Save</button>' +
'<button type="button" class="btn btn-rounded btn-sm btn-default remove-popover">Cancel</button>' +
'</div>' +
'</div>' +
'</div>'
);
// Datepicker init
$('.fc-popover.click .datetimepicker').datetimepicker({
widgetPositioning: {
horizontal: 'right'
}
});
$('.fc-popover.click .datetimepicker-2').datetimepicker({
widgetPositioning: {
horizontal: 'right'
},
format: 'LT',
debug: true
});
// Position popover
function posPopover(){
$('.fc-popover.click').css({
left: eventEl.offset().left + eventEl.outerWidth()/2,
top: eventEl.offset().top + eventEl.outerHeight()
});
}
posPopover();
$('.fc-scroller, .calendar-page-content, body').scroll(function(){
posPopover();
});
$(window).resize(function(){
posPopover();
});
// Remove old popover
if ($('.fc-popover.click').length > 1) {
for (var i = 0; i < ($('.fc-popover.click').length - 1); i++) {
$('.fc-popover.click').eq(i).remove();
}
}
// Close buttons
$('.fc-popover.click .cl, .fc-popover.click .remove-popover').click(function(){
$('.fc-popover.click').remove();
$('.fc-event').removeClass('event-clicked');
});
// Actions link
$('.fc-event-action-edit').click(function(e){
e.preventDefault();
$('.fc-popover.click .main-screen').hide();
$('.fc-popover.click .edit-event').show();
});
$('.fc-event-action-remove').click(function(e){
e.preventDefault();
$('.fc-popover.click .main-screen').hide();
$('.fc-popover.click .remove-confirm').show();
});
}
});
/* ==========================================================================
Side datepicker
========================================================================== */
$('#side-datetimepicker').datetimepicker({
inline: true,
format: 'DD/MM/YYYY'
});
/* ========================================================================== */
});
/* ==========================================================================
Calendar page grid
========================================================================== */
(function($, viewport){
$(document).ready(function() {
if(viewport.is('>=lg')) {
$('.calendar-page-content, .calendar-page-side').matchHeight();
}
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if(viewport.is('<lg')) {
$('.calendar-page-content, .calendar-page-side').matchHeight({ remove: true });
}
})
);
});
})(jQuery, ResponsiveBootstrapToolkit);
//=========================================
The calendar is supposed to show events in the day blocks and date picker, but it is not.
Please help!

how to repeat tpl blocks inside tpl

I have a boxcomponent that I'm creating with a tpl. So in initTemplate I set the template I want by doing
this.tpl = new Ext.Xtemplate( my_template ).
So in my_template, which is a bit long actually, I have a block which I wish to repeat more than once inside my_template.
What's the best way to achieve that? I wish I didn't have to copy the block over and over, specially if that block is long.
for example, let's say that my_template =
'<tpl for="value1">',
'<div class="c1">{a}</div>',
'<div class="c2">{b}</div>',
'</tpl>'
'<tpl for="value2">',
'<div class="c1">{a}</div>',
'<div class="c2">{b}</div>',
'</tpl>'
my data looks like:
data = {
value1: {
a: 'blah',
b: 'bleh'
}
value2: {
a: 'bloh',
b: 'bluh'
}
}
So, in my example, I'd like to know if there's a way to sort of call a function that will repeat
'<div class="c1">{a}</div>',
'<div class="c2">{b}</div>',
So I'd have
'<tpl for="value1">',
myFunction();
'</tpl>'
'<tpl for="value2">',
myFunction();
'</tpl>'

Now it is entirely different question, after you have edited it. Nevermind, the answer is yes, you can use member functions to generate the content. This is example from XTemplate docs. As you can see, anything returned from isBaby and isGirl methods below is rendered in the resulting html. You only need to set myFunction and then call it within the template: this.myFunction()
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'<tpl else>',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>',
{
// XTemplate configuration:
disableFormats: true,
// member functions:
isGirl: function(name){
return name == 'Aubrey' || name == 'Nikol';
},
isBaby: function(age){
return age < 1;
}
}
);
tpl.overwrite(panel.body, data);
And data:
var data = {
name: 'Don Griffin',
title: 'Senior Technomage',
company: 'Sencha Inc.',
drinks: ['Coffee', 'Water', 'More Coffee'],
kids: [
{ name: 'Aubrey', age: 17 },
{ name: 'Joshua', age: 13 },
{ name: 'Cale', age: 10 },
{ name: 'Nikol', age: 5 },
{ name: 'Solomon', age: 0 }
]
};

It depends if data you feed into the template also repeats - if it is an array. As you have <tpl for=".">, you can have <tpl for="innerArray"> so if your data looks similar to the following:
[
{item:'value', innerArray:[{
innerItem:'value1'
},{
innerItem:'value2'
}]}
]
it will work.

new Ext.XTemplate([
'<tpl for=".">',
'<div>',
'<tpl for="list">',
'{[ this.getTemplateIfDataPresent(values, "key_a") ]}',
'{[ this.getTemplateIfDataPresent(values, "key_b") ]}',
'</tpl> ',
'</div>',
'</tpl>'
].join(""), {
compiled: true,
templateStr: '<p> {0}: <b>{1}</b> </p>',
getTemplate: function(values, key) {
if (!values || !values[key]) {
return '-';
}
var result = String.format(this.templateStr, key, values.list[key]);
return result;
}
});

Sencha Touch: how to get config from tpl?

With Sencha Touch, I created a component to display a table for my mobile application.
Here's my component code:
Ext.define('MyApp.components.table.Table', {
extend: 'Ext.Container',
xtype: 'table',
config: {
cls: 'myTableCSS',
scrollable: 'vertical',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<table>',
'<tr>',
'<tpl for="headers">',
'<th>{html}</th>',
'</tpl>',
'</tr>',
'<tpl for="rows">',
'<tr class="{[this.config.id]}" >',
'<tpl for="columns">',
'<td>{html}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>'
}
});
Here's my view implementation:
xtype: 'table',
id: 'myRedTable',
data: [
{
headers: [
{ html: 'firstname' },
{ html: 'lastname' },
{ html: 'age' }
],
rows: [
{
columns: [
{ html: 'John' },
{ html: 'Smith' },
{ html: '38' },
]
}
]
}
],
In my component, when I use {[this.config.id]} I would like to get the id of my view implementation (i.e. myRedTable) but it doesn't work.
Is there any solution to achieve this?

It seems you wrote the syntax for inline arbitrary code correctly, but there's a problem with scope. this refers to the instance of Ext.XTemplate itself, not the table view.
You should try another way to get the reference of your table instance instead, for example, in your table's definition file:
initialize: function(){
var me = this;
me.setTpl('Ext.XTemplate',
// blah blah ...
// now you can use "me" to refer to your table instance
)
}

Extjs 4.1.1 Added new button in Datepicker, but its handler not working

I have added new close button in Ext.picker.Date, but its handler is not getting invoked. here is the jsfiddle link for my code http://jsfiddle.net/ZBKTE/1/
Some details for this code is below
line 12 - Code for adding new close button in picker's renderTpl
line 55 - Code for rendering close button in DOM
line 59 - initComponent method created instance of closeBtn.
Here is complete code as well
Ext.define('my.view.form.DatePicker', {
extend: 'Ext.picker.Date',
requires: [
'Ext.button.Button'],
alias: 'widget.my-datepicker',
msgTarget: 'none',
monthYearText: '',
ariaTitle: '',
renderTpl: [
'<div id="{id}-innerEl" role="grid">',
'<div id="{id}-buttonsEl" class="{baseCls}-close-button-parent">{%this.renderCloseBtn(values, out)%}</div>',
'<div role="presentation" class="{baseCls}-header">',
'<div class="{baseCls}-prev"><a id="{id}-prevEl" href="#" role="button" title="{prevText}"></a></div>',
'<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
'<div class="{baseCls}-next"><a id="{id}-nextEl" href="#" role="button" title="{nextText}"></a></div>',
'</div>',
'<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="presentation">',
'<thead role="presentation"><tr role="presentation">',
'<tpl for="dayNames">',
'<th role="columnheader" title="{.}"><span>{.:this.firstInitial}</span></th>',
'</tpl>',
'</tr></thead>',
'<tbody role="presentation"><tr role="presentation">',
'<tpl for="days">',
'{#:this.isEndOfWeek}',
'<td role="gridcell" id="{[Ext.id()]}">',
'<a role="presentation" href="#" hidefocus="on" class="{parent.baseCls}-date" tabIndex="1">',
'<em role="presentation"><span role="presentation"></span></em>',
'</a>',
'</td>',
'</tpl>',
'</tr></tbody>',
'</table>',
'<tpl if="showToday">',
'<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
'</tpl>',
'</div>', {
firstInitial: function (value) {
return Ext.picker.Date.prototype.getDayInitial(value);
},
isEndOfWeek: function (value) {
// convert from 1 based index to 0 based
// by decrementing value once.
value--;
var end = value % 7 === 0 && value !== 0;
return end ? '</tr><tr role="row">' : '';
},
renderTodayBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
},
renderMonthBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
},
renderCloseBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.closeBtn.getRenderTree(), out);
}
}],
initComponent: function () {
var me = this;
me.closeBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: 'C',
handler: function () {
debug.console('need code for close click');
me.hide();
},
scope: me
});
me.callParent(arguments);
},
beforeRender: function () {
var me = this;
me.callParent(arguments);
//me.monthBtn.removeListener('click', me.showMonthPicker);
me.monthBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: '',
tooltip: me.monthYearText //,
});
},
/**
* Show the previous month.
* #param {Object} e
* #return {Ext.picker.Date} this
*/
showPrevMonth: function (e) {
if (Ext.Date.getFirstDateOfMonth(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1)) >= Ext.Date.getFirstDateOfMonth(this.minDate)) {
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
}
},
/**
* Show the next month.
* #param {Object} e
* #return {Ext.picker.Date} this
*/
showNextMonth: function (e) {
if ((Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1) <= this.maxDate)) {
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
}
},
/**
* Respond to a date being clicked in the picker
* #private
* #param {Ext.EventObject} e
* #param {HTMLElement} t
*/
handleDateClick: function (e, t) {
var me = this;
if (Ext.fly(t.parentNode).hasCls(me.prevCls) || Ext.fly(t.parentNode).hasCls(me.nextCls)) {
e.stopEvent();
} else {
me.callParent(arguments);
}
}
});
Ext.define('my.view.form.ifsdatefield', {
extend: 'Ext.form.field.Date',
alias: 'widget.my-datefield',
msgTarget: 'none',
preventMark: true,
cls: 'ifs-datefield',
initComponent: function () {
var me = this;
me.callParent(arguments);
},
createPicker: function () {
var me = this,
format = Ext.String.format;
return new my.view.form.DatePicker({
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
cls: me.cls,
ariaTitle: 'test',
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
msgTarget: 'none',
width: 220,
height: 265,
listeners: {
scope: me,
select: me.onSelect
},
keyNavConfig: {
esc: function () {
me.collapse();
}
}
});
}
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'my-datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
minValue: Ext.Date.add(new Date(), Ext.Date.YEAR, -5),
maxValue: Ext.Date.add(new Date(), Ext.Date.YEAR, 1),
value: Ext.Date.clearTime(new Date(), false),
editable: false
}]
});

Eh eh, clever try. You've just missed the finishRenderChildren.