I am trying to add this code in Sencha Touch, but it´s not working..
items: [
{
xtype: 'label',
tpl: ['<div class="label">{[c.Text.getText("SC_ORDER_A_TOTAL_NET_AMOUNT")]} </div>' +
'<div class="total-value">{netamount}</div>' +
'<div class="indicator {lightstatus}">{lightvalue}</div>'].join()
}
]
Maybe, it´s not possible to do this.. any clue? I need to configure different labels with different hidden option, sometimes it´s true and sometimes it´s false.
This is working for me:
{
xtype: 'label',
tpl: '<tpl if="doShow"><div style="color:red;">It is raining {textFromData}</div></tpl>',
data: {textFromData:'Cats and Dogs'}
}
Related
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.
In Internet Explorer(tested with IE11), the clicking on a dataview item will cause that item to automatically scroll to the top. To re-create the issue, paste the following code into ExtJS documentation fiddle, run the fiddle, scroll all the way to bottom, and then click on one of the images. This will cause the dataview to scroll up automatically.
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' }
]
});
var imageTpl = new Ext.XTemplate(
'<div class="abc">',
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>',
'</div>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.abc',
emptyText: 'No images available',
renderTo: Ext.getBody()
});
Is there any way I can stop this automatic scrolling ? This only happens in IE(the scroll position remains unaffected in FF and Chrome).
I created a comboBox,
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{abbr} - {name}</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{abbr} - {name}',
'</tpl>'
)
});
below the drop down I wanted to display some messages.
Can anybody give some idea which component I will use or how to display some message below the drop down. Please check in screenshot.
You can override the renderTpl of Ext.view.BoundList, like:
listConfig: {
renderTpl: [
'<div id="{id}-listWrap" data-ref="listWrap"',
' class="{baseCls}-list-ct ', Ext.dom.Element.unselectableCls, '">',
'<ul id="{id}-listEl" data-ref="listEl" class="', Ext.baseCSSPrefix, 'list-plain"',
'<tpl foreach="ariaAttributes"> {$}="{.}"</tpl>',
'>',
'</ul>',
'<div style="border: solid 3px #000; padding: 2px;">Message</div>',
'</div>',
'{%',
'var pagingToolbar=values.$comp.pagingToolbar;',
'if (pagingToolbar) {',
'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
'}',
'%}', {
disableFormats: true
}
],
}
Working example: https://fiddle.sencha.com/#view/editor&fiddle/23g4
I have a store with which i am populating a list. The store is as follows:
Ext.define('EventReminder.store.Upcoming', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.SQL'],
config: {
autoLoad: true,
storeId: 'Upcoming',
model: 'EventReminder.model.Event',
proxy: {
type: 'sql',
database: 'EventReminder',
table: 'NewEvents'
},
sorters: [{property: 'date', direction: 'ASC'}]}
});
The list is as follows:
{
xtype: 'list',
flex: 1,
autoDestroy: false,
itemId: 'upcomingEventList',
onItemDisclosure: true,
store: 'Upcoming',
cls: 'event-list',
scrollable: true,
}
I have created an XTemplate for this list as follows:
var xtpl = new Ext.XTemplate(
'<tpl for=".">',
' <tpl if="priority == \'high\'">',
' <div class = "color-event-high">',
' <div class="event-category">{category}</div>',
' <div class="event-date">On: {date} at: {eventTime}</div>',
' <div>Alert at : {alertTime}</div>',
' <div class="event-people">People: {people}</div>',
' <div class="event-message">{message}</div>',
' <div class="event-priority">{priority}</div>',
' <div class="event-activities">{activities}</div>',
' </div>',
' </tpl>',
'</tpl>'
);
Here i want to give a styling based on the priority value of the list item. I have set the tpl of the list as follows in the view's initialize function as follows:
this.down("#upcomingEventList").setItemTpl(xtpl);
I Normally specify ItemTpl for a list directly in its config and don't know much about using XTemplates. So when i use the above Xtemplate the list doesn't show the items. I've checked the documentation and but could'nt understand how these XTemplates work. I've seen other answers for similar questions but did'nt help much.
Is this the correct way to write an XTemplate for a List, if we want some conditional styling based on the list items?
I am new to ExtJS. Currently I have grid implemented as shown below.
But I want to show the same information in a different way like showing in boxes, as shown below. How do I implement this?
You haven't specified which version of Ext JS you are using. So, will give you solution for both versions:
In ExtJS 3.x
You can make use of the Ext.DataView class. Here is an example of dataview. Even though the example makes use of the images, you can easily modify the view, but changing the template. Now, you have to work on the pagination bar. You will have to make use of the bbar property and create a toolbar. This toolbar will have your navigation buttons. So, you will have something like this:
var panel = new Ext.Panel({
id:'person-view',
frame:true,
title:'User Grid',
bbar: [{
text: Prev,
iconCls: 'prev-icon'
},{
text: Next,
iconCls: 'next-icon'
}],
items: new Ext.DataView({
store: yourStore,
tpl: yourTemplate,
autoHeight:true,
multiSelect: false,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No users to display',
})
});
[Obviously, the above code is not complete. You will have to add your store, template, other properties and event listeners according to user needs.]
In ExtJS 4.x
You will have to make use of Ext.view.View class. Here is a skeleton code:
Ext.define('MyApp.view.members.Display',{
extend: 'Ext.panel.Panel',
alias : 'widget.memberslist',
initComponent: function() {
this.template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="member">',
'Name : {name} <br/>',
'Title : {title}',
'</div>',
'</tpl>'
);
this.store = Ext.create('MyApp.store.Members');
this.bbar = this.buildToolbar();
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function() {
return [{
xtype: 'dataview',
store: this.store,
id: 'members',
tpl: this.template,
itemSelector: 'div.member',
overItemCls : 'member-hover',
emptyText: 'No data available!'
}]
},
buildToolbar : function() {
return [{
text: 'Previous',
action: 'prev'
},{
text: 'Next',
action: "next"
}];
}
});
The above code makes use of the new MVC architecture. You will have to add the event listeners etc in your controller.