Ext.define('App.view.util.NavigationView', {
extend: 'Ext.panel.Panel',
tpl: [''
,'<ul class="app-navigation-container">'
, '<tpl for=".">'
, '<a href="#{navigationToken}">'
,'<li class="app-navigation-pane {iconCls}">'
, '<h2>{title}</h2>'
, '<p>{description}</p>'
, '</li>'
, '</a>'
, '</tpl>'
, '</ul>'
, '<div class="x-clear"></div>'
]
});
I am new to ExtJS and I am debugging some small client-side issues which involved ExtJS. How can I update the
navigationToken variable in other files. I have some listeners like 'select' listener in which I would like to change the value for navigationToken.
Your component has a property called 'data', which is part of the extended panel. This property is used to provide the template as defined in 'tpl' with data, which can set as a property.
So in your listener you can set the data property by calling
var data = [{
navigationToken: 'navigationToken1',
iconCls: 'iconCls',
title: 'title1',
description: 'description1'
}, {
navigationToken: 'navigationToken1',
iconCls: 'iconCls',
title: 'title2',
description: 'description2'
}];
[view].update(data);
where [view] should references to your 'App.view.util.NavigationView'.
Related
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 have an extjs Panel component that contain a dataview item. I use this to display the images from a store. It works as expected during the first load. But later when I reload the imgStore with new image url's (which occurs when user searches and loads a different city) the view does not refresh. Can someone point me in the best way to refresh the panel/dataview item when the associated datastore is refreshed?
The actual code has more than one item in the panel and many other buttons and toolbars. Please see the relevant part of the code below:
init: function() {
// image store
this.imgStore = new Ext.data.JsonStore({
idProperty: 'imgId',
fields: [{
name: 'imgId',
type: 'integer',
mapping: 'imgId'
}, {
name: 'url',
mapping: 'url'
}],
data: [],
});
// load images
Ext.each(myImgStore.data.items, function(itm, i, all) {
this.imgStore.loadData(itm.data, true);
});
// add to a dataview in a panel
this.myPanel = new Ext.Panel({
autoScroll: true,
items: [{
xtype: 'dataview',
store: this.imgStore,
autoScroll: true,
id: 'imgList',
tpl: new Ext.XTemplate(
'<ul class="imgGrid">',
'<tpl for=".">',
'<li>',
'<div class=\"imgThumbnail\" imgId="{imgId}">',
'<img src="{url}"/>',
'</div>',
'</li>',
'</tpl>',
'</ul>',
'<div class="x-clear"></div>'
),
listeners: {
afterrender: function() {
// do something
}
}
}]
});
// add this to the center region of parentpanel
Ext.getCmp('parentPanel').add([this.myPanel]);
this.myPanel.doLayout();
}
Everytime the store is reloaded, I want the dataview to be refreshed. I'm using extjs 3.4 version.
Thanks!
You need to refresh your dataview. I suggest putting it into a variable.
var dataView = new Ext.DataView({
store: this.imgStore,
autoScroll: true,
id: 'imgList',
tpl: new Ext.XTemplate(
.
.
.
),
listeners: {
afterrender: function() {
// do something
}
}
});
Then add a listener in your store:
this.imgStore = new Ext.data.JsonStore({
idProperty: 'imgId',
fields: [{
name: 'imgId',
type: 'integer',
mapping: 'imgId'
}, {
name: 'url',
mapping: 'url'
}],
data: []
});
// Define your dataView here
this.imgStore.on('load', function() {
dataView.refresh();
});
Note: Code is not tested.
I'm using the snippet bellow to add some HTML elements to the top of a FormPanel:
{
xtype: 'component',
itemId: 'form-top',
cls: 'form-top-items',
renderTpl: [
'<div id="{id}-formHelp" class="form-help">',
'<span class="form-help-text">{helpText}</span>',
'</div>'
],
renderData: {
helpText: __("Os campos com * são de preenchimento obrigatório.")
},
childEls: [
{name: 'formHelp', itemId: 'form-help'}
]
}
But once the component is rendered, I can't fetch any child items.
I'm expecting a way to access the formHelp item somehow, but can't find it anyway bellow the form-top component.
The itemId must match the portion of your child el's id that comes after {id}-.
You have two options:
Change your itemId to 'formHelp'
OR
change your div to <div id="{id}-form-help" class="form-help">
How do i correctly pass the value of my selectfield into the ajax proxy in my store?
Ext.define('FirstApp.view.Home',{
extend:'Ext.Panel',
xtype:'home',
config:{
title:'Home',
iconCls:'home',
html:'<h1>Home Page</h1><hr><p>Welcome to Sencha Touch 2 Training</p>',
layout:'fit',
scrollable:true,
styleHtmlContent:true,
styleHtmlCls:'home',
items: [
{
xtype: 'selectfield',
id: 'visit',
label: 'Choose one',
value:'restaurant',
options: [
{text: 'Museum', value: 'museum'},
{text: 'Pubs', value: 'pub'},
{text: 'Attractions', value: 'attraction'}
]
}
]
}
})
I am trying to place the value here: '+ REFERENCE HERE +' in the code below. I have tried '+#visit+' and '+#value+' with no success
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.Place',
proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json? location=52.247983,-7.141113&radius=10000&types=food&name='+ REFERENCE HERE +'&sensor=false&key=KEY',
reader:{
type:'json',
rootProperty:'results'
}
}
}
})
To get a component by ID in Sencha frameworks you want to use Ext.getCmp, and then use the getValue method. So where you are trying to put the reference, put this:
Ext.getCmp('visit').getValue()
Ideally you want to try to stay away from hardcoded component IDs, and instead use refs/selectors based on the component path, type, etc.
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.