PDA

View Full Version : custom grid plugin



AndreyPris
17 Jan 2015, 4:53 AM
Can you give me a simple example of custom plugin:
This plugin should show tpl div over the grid cell.



Ext.define('rms.ux.DnD', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.dnd',
requires: [
'Ext.grid.column.Column',
'Ext.util.KeyNav'
],
ordTpl: [
'<div class="ord" style=' + '"' + 'background-color: green; height:' + '100' + 'px; width: '
+ '100' + 'px' + '; left: 300px ; right: 300px' + '"' + '>' +
'Hello' +
'</div>'
],
init: function (grid) {
var me = this;
me.callParent(arguments);
}
});

AndreyPris
19 Jan 2015, 1:30 AM
Any help?

Jad
19 Jan 2015, 1:41 AM
Hello,

I'm sorry but i don't understand what you want to do ?

AndreyPris
19 Jan 2015, 3:15 AM
I need to render 3-5 components like window over the grid cells.
I have XY position for this components and height and width.
It is more clear?
P.S. Sorry for paint. )
51519

Jad
19 Jan 2015, 4:19 AM
what about http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Template

AndreyPris
19 Jan 2015, 4:40 AM
I saw this docs. But its not I realy need. Default gridPanel not allow merged cells. Thats way I need to render component with some content over "cells".

Jad
19 Jan 2015, 6:43 AM
and what about tooltip ?

AndreyPris
19 Jan 2015, 7:09 AM
Mb it can be solved with a tooltip. But can you give me a working example?

Jad
19 Jan 2015, 8:25 AM
The content depend of the grid record selected ?

AndreyPris
19 Jan 2015, 8:51 AM
Yep. But i think I can do it by yours working example.

P.S. I'm new with ExtJS and I can't understand how I can use XTemplate. How I can render simple div with h:150, w:150 and background:green.
I can't do working plugin with this docs http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.XTemplate

Jad
19 Jan 2015, 11:42 PM
Try like this :-) Ext.create('Ext.data.Store', { storeId:'employeeStore', fields:['firstname', 'lastname', 'seniority', 'department'], groupField: 'department', data:[ { firstname: "Michael", lastname: "Scott", seniority: 7, department: "Management" }, { firstname: "Dwight", lastname: "Schrute", seniority: 2, department: "Sales" }, { firstname: "Jim", lastname: "Halpert", seniority: 3, department: "Sales" }, { firstname: "Kevin", lastname: "Malone", seniority: 4, department: "Accounting" }, { firstname: "Angela", lastname: "Martin", seniority: 5, department: "Accounting" } ] }); Ext.create('Ext.grid.Panel', { title: 'Column Template Demo', store: Ext.data.StoreManager.lookup('employeeStore'), columns: [ { text: 'Full Name', xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },{ text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})
', flex:1 } ], height: 200, width: 500, renderTo: Ext.getBody() });