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
Related
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 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>'
]
Lets assume i have a dataview with the following itemTpl
itemTpl: [
'<div class="category_entry_inner">',
' <div class="category_right">',
' <div class="category_quantity">{catQty}</div>',
' </div>',
' <div class="category_left">',
' <div class="category_left_content">',
' <div class="category_left_icon"></div>',
' <div class="category_left_text">{catName}</div>',
' </div>',
' </div>',
'</div>'
],
Now what I would like to do is hook to the dataview refresh event and when fired select all divs that have a cass of category_entry_inner and add a simple class (.someclass{background:red}) to all those divs.
To select all the divs you want, you can do
var divs = Ext.DomQuery.select('div[class=category_entry_inner]');
It will return an array with all the divs and then you just need to loop through them and add a class :
var i,j;
for(i=0,j=divs.length;i<j;i++){
divs[i].className += " bar";
}
Hope this helps
var listObjs = Ext.DomQuery.select("div[class='category_entry_inner']");
Ext.Array.forEach(listObjs, function(elmnt, idx) {
Ext.get(elmnt).clearListeners();
Ext.get(elmnt).addListener('tap', this.yourfunctionname, this, {id:elmnt.id});
}, this);
this is do your work definately
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(){}
});
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