PDA

View Full Version : Grid with tooltip doesn't work



Rodrifmed
25 Apr 2012, 7:08 AM
I have a grid rendered with ajax store, and i want to put in it tooltip with data image.
I use de example of extjs tooltip delegate ( http://localhost/extjs4/docs/index.html#!/api/Ext.tip.ToolTip-method-constructor ), but this seems doesn't work.

My code:



Ext.define('DataStore', {
extend:'Ext.data.Store',
autoDestroy: true,
autoLoad: false,
autoSync: true,
model: 'Evento',
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
//CRUD
api: {
create: '<?= site_url() ?>administracao/evento/criaEvento',
read: '<?= site_url() ?>administracao/evento/listaEvento',
update: '<?= site_url() ?>administracao/evento/atualizaEvento',
destroy: '<?= site_url() ?>administracao/evento/deletaEvento'
},
simpleSortMode: true, //muda a codificação de json para variaveis para mandar para o servidor
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
},
writer: {
type: 'json',
root: 'results',
writeAllFiels: true,
encode: true,
allowSingle: true
}
},
remoteSort: true,
remoteFilter: true
});

Ext.onReady(function(){
var dataStore = Ext.create('DataStore');

var grid = Ext.create('Ext.grid.Panel', {
title: "Dados dos Eventos",
autoWidth: true,
autoHeight: true,
plugins: [rowEditing],
features: [filters],
renderTo: 'mainGrid',
frame: true,
allowDeselect : true,
store: dataStore,
id: 'grid',
dockedItems: [{
xtype: 'pagingtoolbar',
store: dataStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
},
{
xtype: 'toolbar',
items: [ {
text:'Apagar Filtro',
tooltip:'Retorna ao grid default',
handler: function () {
grid.filters.clearFilters();
}
}]
}
],
columns: [
{
text: "Id",
dataIndex: 'id',
hidden: true,
hideMode: 'display'
},
{
text: "Nome",
width: 150,
filterable: true,
dataIndex: 'nome',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: "Em Cartaz",
filterable: true,
dataIndex: 'flag',
filter: {
type: 'boolean',
yesText: 'sim',
noText: 'não'
}


},
{
text: "Censura",
filterable: true,
dataIndex: 'censura',
editor: 'textfield'
},
{
text: "Genero",
filterable: true,
dataIndex: 'genero',
editor: 'textfield'
},
{
text: "Produtor",
filterable: true,
dataIndex: 'produtor',
editor: 'textfield'
},
{
text: "Diretor",
filterable: true,
dataIndex: 'diretor',
editor: 'textfield'
},
{
text: "Sinopse",
filterable: true,
dataIndex: 'sinopse',
editor: 'textfield'
},
{
text: "Poster",
filterable: true,
flex: 1,
tooltip:'rodrigo',
dataIndex: 'poster'
}
],
listeners: {
selectionchange: function(model, selected) {
if (selected[0]) {
rowSelect = selected[0];
grid.down('#changePoster').setDisabled(false);
} else {
grid.down('#changePoster').setDisabled(true);
}
}
}
});


// grid.getView().on('render', function(view) {
// console.log(view);
// console.log('entrou');
// view.tip = Ext.create('Ext.tip.ToolTip', {
// // The overall target element.
// target: view.el,
// // Each grid row causes its own seperate show and hide.
// delegate: view.itemSelector,
// // 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) {
// tip.update('Over company "' + view.getRecord(tip.triggerElement).get('nome') + '"');
// }
// }
// });
// });

dataStore.load({
params:{
start:0,
limit: itemsPerPage
}
});



});



Please some one can help me??

Rodrifmed
25 Apr 2012, 7:10 AM
why grid.getView doesn't work?!