ExtJs 4: How To Add Grid Cell Tooltip

Posted By Vitaliy | August 31, 2012 | ExtJS 4.1.0
0 8805
We can use grid column renderer.

Js Code

// Init the singleton.  Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();

...

{
    header: 'comment',
    dataIndex: 'comment',
    flex: 1,
    renderer: function (value, meta, record) {
        var max = 15;
        meta.tdAttr = 'data-qtip="' + value + '"';
        return value.length < max ? value : value.substring(0, max - 3) + '...';
    }
}
            

Detect IFrame Load Event

Posted By Vitaliy | April 26, 2012 | ExtJS 4.0.7
0 5930
Reply to thread

Js Code

Ext.widget('panel', {
	title: 'My Slow IFrame',
	width: 300,
	height: 100,
	items: {
		xtype: 'component',
		autoEl: {
			tag: 'iframe',
			style: 'height: 100%; width: 100%; border: none;',
			src: '/PostData/GetContentWithSleep'
		},
		listeners: {
			load: {
				element: 'el',
				fn: function () {
					this.parent().unmask();
				}
			},
			render: function () {
				this.up('panel').body.mask('Loading...');
			}
		}
	},
	renderTo: Ext.getBody()
});
            

How Add Dynamic Button In Grid Panel Column Using Renderer?

Posted By Vitaliy | March 14, 2012 | ExtJS 4.0.7
0 6942
Reply to thread

Js Code

Ext.create('Ext.grid.Panel', {
	title: 'Simpsons',
	width: 500,
	height: 200,
	store: Ext.create('Ext.data.Store', {
		fields: ['name', 'email', 'phone'],
		data: [
			{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
			{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
			{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },
			{ 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }
		]
	}),
	columns: [
		{ header: 'Name', dataIndex: 'name' },
		{ header: 'Email', dataIndex: 'email', flex: 1 },
		{ header: 'Phone', dataIndex: 'phone' },
		{
			header: 'Buttons',
			renderer: function (v, m, r) {
				var id = Ext.id();
				Ext.defer(function () {
					Ext.widget('button', {
						renderTo: id,
						text: 'Edit: ' + r.get('name'),
						width: 75,
						handler: function () { Ext.Msg.alert('Info', r.get('name')) }
					});
				}, 50);
				return Ext.String.format('<div id="{0}"></div>', id);
			}
		}
	],
	renderTo: Ext.getBody()
});