Develop Reference

KendoUI add treelist toolbar template causes "TypeError: (intermediate value).toLowerCase is not a function"

I found that the belowing code will cause a "TypeError: (intermediate value).toLowerCase is not a function", it seems that its caused by the toolbar template definition, but the same toolbar definition works fine in kendo grid
$(document).ready(function(){
$("#treelist").kendoTreeList({
columns: [
{ field: "Name" },
{ field: "Position" }
],
dataSource: {
data: [
{ id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
{ id: 2, parentId: 1, Name: "Alex Sells", Position: "EVP Sales" },
{ id: 3, parentId: 1, Name: "Bob Price", Position: "EVP Marketing" }
],
},
toolbar: [
{ template: '<a class="k-button" onclick="customSave(this)" href="\\#"><span class="k-icon k-i-tick"></span>custom save</a>' },
{ template: '<a class="k-button" onclick="customCancel(this)" href="\\#"><span class="k-icon k-i-cancel"></span>custom cancel</a>' }
]
});
});
Is there any solution to slove this?(The button icon must be retained)

The proper way to create a toolbar with a click handler is:
toolbar: [
{
name: 'custom',
text: 'custom save',
imageClass: 'k-i-tick',
click: customSave
},
{
name: 'custom',
text: 'custom cancel',
imageClass: 'k-i-cancel',
click: customCancel
},
]
Here how it works:
name must be custom, because it's not a built-in command. If this attribute is omitted, you'll get an error.
text: whatever you want to display on the button
imageClass: the class of the icon you want to display (k-icon is implied)
click: the event handler
I've created a jsFiddle to illustrate: https://jsfiddle.net/ueL8mrcr/

After searching the document I found out the solution, hope it helps someone who meet the same issue.
Accroding to this:
If a String value is assigned to the toolbar configuration option, it
will be treated as a single string template for the whole treelist
Toolbar, and the string value will be passed as an argument to a
kendo.template() function.If a Function value is assigned (it may be a
kendo.template() function call or a generic function reference), then
the return value of the function will be used to render the treelist
Toolbar contents.If an Array value is assigned, it will be treated as
the list of commands displayed in the treelist Toolbar.
So I change this:
toolbar: [ createToolBar ]
Add the function:
function createToolbar() {
return [
'<a class="k-button" href="#" onclick="customSave(this)"><span class="k-icon k-i-tick"></span>custom save</a>',
'<a class="k-button" href="#" onclick="customCancel(this)"><span class="k-icon k-i-cancel"></span>custom cancel</a>'
];
}
Then it works.
And just as the reference said, if I put the return string array directly to toolbar configuration, it will render the array as two kendo button and then the icons will be lost.
And in this case the 'href=\\#' should change to 'href=#', otherwise it will take a redirect action, I don't know the reason.

What is tpl and how do I interprete it in extJS context?

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'.

Extjs, collapsed form panel. Title not showing up

I have a form panel in a border layout as follows:
{
xtype: 'form',
region: 'north',
split: true,
labelAlign: 'top',
height: 130,
autoScroll: true,
collapsible: true,
listeners: {
'collapse': function () {
Ext.getCmp('slider').setTitle('Filter Events By Time');
// this is not working either
}
},
//collapsed: true,
id: 'slider',
title: 'Filter Events By Time',
border: true,
html: {
tag: 'div',
style: '',
children: [{
tag: 'div',
cls: 'slider_div',
style: 'margin-right:50px;position:relative;float:left'
}, {
tag: 'div',
cls: 'slider_unit',
style: 'margin-top:10px'
}, {
tag: 'div',
style: 'clear:left'
}, {
tag: 'div',
cls: 'startDate',
style: 'margin-right:30px;float:left'
}, {
tag: 'div',
cls: 'endDate',
style: ''
}, {
tag: 'div',
style: 'clear:left'
}]
}
}
Now, when I collapse it using following code, the collapsed panel does not have a title. I can see the title if I expand the panel.
Ext.getCmp('slider').collapse(true);
How can I get title on a collapsed form panel?

There are two small things you need to fix:
1 Method collapse, does not take argument bool, but collapse( [direction], [animate] ), all optional.
2 Use itemId instead of id:
An itemId can be used as an alternative way to get a reference to a
component when no object reference is available. Instead of using an
id with Ext.getCmp, use itemId with
Ext.container.Container.getComponent which will retrieve itemId's or
id's. Since itemId's are an index to the container's internal
MixedCollection, the itemId is scoped locally to the container --
avoiding potential conflicts with Ext.ComponentManager which requires
a unique id.
3 Fetch component reference using this inside of internal scope and use ComponentQuery outside of it. Like this:
this.setTitle('Filter Events By Tim Collapsede');
and/or
Ext.ComponentQuery.query('#slider')[0].collapse();
and also please create your components using Ext.define, and then call them in your border layout using alias/xtype. :-)
Here is a example on fiddle

Passing a value from a selectfield in a view to a store

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.

How to implement this custom grid in ExtJS?

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.