In the previous chapter we discussed various ways we can add a ToolTip to the Grid Cells and buttons in the Toolbar. Here is the complete source code for the tutorial...
 |
Application starting point index.html
<html>
<head>
<title>ExtJs 4 ToolTip Tutorial</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Application JavaScript file app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.tip.*',
'Ext.Button'
]);
Ext.application({
name: 'CN',
appFolder: 'app',
controllers: [
'Countries'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype: 'countryList',
}
]
});
}
});
JavaScript source file for the model Country.js
Ext.define('CN.model.Country', {
extend: 'Ext.data.Model',
fields: [
'code',
'name',
'continent',
'region',
'lifeExpectancy',
'gnp'
]
});
JavaScript source file for the Store Countries.js
Ext.define('CN.store.Countries', {
extend: 'Ext.data.Store',
model: 'CN.model.Country',
autoLoad: true,
pageSize: 15,
proxy: {
type: 'ajax',
url: 'CountryServlet',
reader: {
type: 'json',
totalProperty: 'totalCount',
root: 'countries',
successProperty: 'success'
},
}
});
JavaScript source file for the Grid View CountryList.js
Ext.define('CN.view.CountryList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.countryList',
title : 'List of Countries',
store : 'Countries',
loadMask: true,
height: 400,
width: 700,
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: 'Countries',
items: [
{
xtype: 'tbseparator'
},
{
id : 'myTip1',
xtype : 'button',
text: 'ToolTip Example 1',
tooltip: 'Tool Tip added in the View definition ...'
},
{
id : 'myTip2',
xtype : 'button',
text: 'ToolTip Example 2',
}
]
}],
initComponent: function() {
this.columns = [{
header: 'Country Code',
dataIndex: 'code',
flex: 1,
renderer : function(value, metadata, record) {
myToolTipText = "<b>Tool Tip added using renderer function for country</b>";
myToolTipText = myToolTipText + "<br/>Code: "+ record.get('name');
myToolTipText = myToolTipText + "<br/>Name: "+ record.get('name');
myToolTipText = myToolTipText + "<br/>Continent: "+ record.get('continent');
myToolTipText = myToolTipText + "<br/>Region: "+ record.get('region');
metadata.tdAttr = 'data-qtip="' + myToolTipText + '"';
return value;
}
},
{header: 'Name', dataIndex: 'name', flex: 3}
];
this.callParent(arguments);
}
});
JavaScript source file for the application controller Countries.js
Ext.define('CN.controller.Countries', {
extend : 'Ext.app.Controller',
//define the stores
stores : ['Countries'],
//define the models
models : ['Country'],
//define the views
views : ['CountryList'],
refs: [{
ref: 'myGrid',
selector: 'grid'
}],
init : function() {
this.control({
'viewport > panel' : {
render : this.onPanelRendered
},
'countryList' : {
render : this.onGridRendered
},
'countryList button[id=myTip2]' : {
render : this.onButtonRendered
}
});
},
onPanelRendered : function() {
//just a console log to show when the panel is rendered
console.log('The panel was rendered');
},
onGridRendered : function(gridView) {
console.log('Grid panel was just rendered');
//create the ToolTip
gridView.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: gridView.el,
// Each grid row causes its own seperate show and hide.
delegate: gridView.view.cellSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
gridColums = gridView.view.getGridColumns();
column = gridColums[tip.triggerElement.cellIndex];
//only display the tool tip for name column
if(column.dataIndex === 'name'){
record = gridView.view.getRecord(tip.triggerElement.parentNode);
myToolTipText = "<b>Tool Tip for country added from the controller</b>";
myToolTipText = myToolTipText + "<br/>Code: "+ record.get('name');
myToolTipText = myToolTipText + "<br/>Name: "+ record.get('name');
myToolTipText = myToolTipText + "<br/>Continent: "+ record.get('continent');
myToolTipText = myToolTipText + "<br/>Region: "+ record.get('region');
tip.update(myToolTipText);
}
else {
return false;
}
}
}
});
},
onButtonRendered : function() {
console.log('The ToolTip Button was rendered');
//create the ToolTip
Ext.create('Ext.tip.ToolTip', {
target: 'myTip2',
html: 'Tool Tip added later from the app controller ...'
});
}
});
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.