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
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 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 am pretty new to web based applications development.I am using ASP.Net MVC4 with dojo toolkit. My requirement is like I have certain textboxes to capture data and also one dojo grid to capture certain details which are in a tabular format. So I am using Dojo grid(http://dojotoolkit.org/api/1.8/dojox/grid/DataGrid) with ItemFileWriteStore. My view is like below(I am using razor)
#using (Html.BeginForm("CreateNewData", "Home", FormMethod.Post, new { id = "myForm" }))
{
<div class="controlWrapper">
<div class="controlLabel">
#Html.DisplayNameFor(model => model.Name)
</div>
<div class="controlValue">
#Html.TextBoxFor(model => model.Name)
</div>
</div>
<div class="controlWrapper">
<h4>
Table Items</h4>
<div id="myGrid">
</div>
<div id="addRemoveMode">
<button data-dojo-type="dijit.form.Button" id="addButton" onclick="addRecord()">
Add</button>
<button data-dojo-type="dijit.form.Button" id="removeButton" onclick="removeRecord()">
Remove Selected Rows
</button>
</div>
</div>
}
My java script to create grid is like below
require(["dojo/ready",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/json",
"dojo/query",
"dijit/form/TextBox"
], function (ready, DataGrid, ItemFileWriteStore, Json, query, TextBox) {
ready(function () {
var layout = [[
{ name: 'ID', field: 'ID', hidden: true },
{ name: 'Label', field: 'Label', width: '10%', editable: true },
{ name: 'Position', field: 'Position', width: '10%', editable: true }
]];
var attCodeData = {
identifier: 'ID',
items: []
};
console.log(globalVar);
attCodeData["items"] = globalVar;
myStore= new ItemFileWriteStore({ data: attCodeData })
myGrid= new DataGrid({
store: myStore,
structure: layout,
rowSelector: '20px'
},"divGrid");
myGrid.startup();
}
My problem is since the grid is inside the form, whenever I add or remove a row, page is getting submitted to Post method mentioned in form. I just need to post the whole data so that I can process together. So I moved my grid outside Form. Now I am confused how to capture the whole data(data in text boxes and grid together) and submit to a controller method. Please help me.
To preventing whole page from getting submitted to Post method, you should use ajax solutions for sending and receiving data.
Take a look at this :DataGrid View with "CRUD operations" using Dojo DataGrid, JsonRest Store, Entity Framework, SQL Server, ASP.NET MVC Web API
and this: Ajax with dojo/request. I hope, they help.
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>'
]
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(){}
});