PDA

View Full Version : Ext.ux.FitToContainer -- an improvement over Ext.ux.FitToParent:



illuminum
7 Jul 2008, 8:57 PM
Plugin:


Ext.namespace('Ext.ux','Ext.ux.plugins');
Ext.ux.plugins.FitToContainer = function(options) {
// Takes options hash with following specifications:
// var options = {
// container: container_el
// width: true, // e.g. resize to container width (default true)
// height: false // e.g. do not resize to container height (default true)
// width_adjust: int // adjust the width up or down by this number in pixels
// height_adjust: int // adjust the height up or down by this number in pixels
// x: int // set absolute x coordinate
// y: int // set absolute y coordinate
// x_adjust: int // adjust the (existing) x coordinate right or left
// y_adjust: int // adjust the (existing) y coordinate up or down
if (!options) options = {};
var container;
var doResize = function() {
var size = container.getViewSize();
var pos = this.getPosition();
if ((options.width === undefined) || (options.width === true))
this.setWidth(size.width + (options.width_adjust? options.width_adjust : 0));
else
;
if ((options.height === undefined) || (options.height === true))
this.setHeight(size.height + (options.height_adjust? options.height_adjust : 0));
else
;
if (options.x)
pos[0] = options.x;
if (options.y)
pos[1] = options.y;
if (options.x_adjust)
pos[0] = pos[0] + options.x_adjust;
if (options.y_adjust)
pos[1] = pos[1] + options.y_adjust;
this.setPagePosition(pos);
};
return {
init: function(c) {
c.afterRender = c.afterRender.createSequence(function() {
container = Ext.get(options.container || c.container.dom);
doResize.createDelegate(this)();
},c);
}
};
};
Example usage:


this.navigation.select.arabic.combo = new Ext.form.ComboBox({
plugins: [
new Ext.ux.plugins.navigation.default.settings.ComboBox({
id: 'select_arabic',
emptyText: 'Select: Arabic Font',
title: 'Arabic Font',
store: this.navigation.select.arabic.store,
displayField: 'name',
valueField: 'rendition_id'
}),
new Ext.ux.plugins.FitToContainer()
]
});
this.navigation.select.english.combo = new Ext.form.ComboBox({
plugins: [
new Ext.ux.plugins.navigation.default.settings.ComboBox({
id: 'select_english',
emptyText: 'Select: English Translation',
title: 'English Translation',
store: this.navigation.select.english.store,
displayField: 'name',
valueField: 'rendition_id'
}),
new Ext.ux.plugins.FitToContainer({
width_adjust: -12,
x_adjust: 6,
y_adjust: 1,
height: false
})
]
});
Result of above resize example and positioning
http://98.212.231.100/assets/temp/example.png

illuminum
7 Jul 2008, 8:58 PM
Intended to improve upon http://extjs.com/forum/showthread.php?t=28318

evant
7 Jul 2008, 9:04 PM
Yikes.

Looks cool, but could.use.less.periods.in.the.name.

How about Ext.ux.plugins.FitToContainer?

illuminum
7 Jul 2008, 9:10 PM
heh, applied that--I like javascript namespaces a little too much maybe

illuminum
8 Jul 2008, 2:40 PM
new and improved


Ext.ux.plugins.FitToContainer = function(options) {
// Takes options hash with following specifications:
// var options = {
// container: container_el
// width: true, // e.g. resize to container width (default true)
// height: false // e.g. do not resize to container height (default true)
// width_adjust: int // adjust the width up or down by this number in pixels
// height_adjust: int // adjust the height up or down by this number in pixels
// x: int // set absolute x coordinate
// y: int // set absolute y coordinate
// x_adjust: int // adjust the (existing) x coordinate right or left
// y_adjust: int // adjust the (existing) y coordinate up or down
// trigger: a config object specifies the precise event at which the fit is performed;
// trigger takes two properties: 'listenTo' and 'listenFor'
// For example, to apply the fit adjustments after an arbitrary store object's load event is fired,
// trigger: {
// listenTo: someStoreObject,
// listenFor: 'load'
// }
if (!options) options = {};
var container;
var doResize = function() {
var size = container.getViewSize();
var pos = this.getPosition();
var width = size.width + (options.width_adjust? options.width_adjust : 0);
var height = size.height + (options.height_adjust? options.height_adjust : 0);
if ((options.width === undefined) || (options.width === true)) {
this.setWidth(width);
}else
;
if ((options.height === undefined) || (options.height === true))
this.setHeight(height);
else
;
if (options.x)
pos[0] = options.x;
if (options.y)
pos[1] = options.y;
if (options.x_adjust)
pos[0] = pos[0] + options.x_adjust;
if (options.y_adjust)
pos[1] = pos[1] + options.y_adjust;
this.setPagePosition(pos);
};
return {
init: function(component) {
if (options.hideFirst === true)
component.hide();

if ((options.trigger) && (options.trigger.listenTo) && (options.trigger.listenFor)) {
var listener_config = {};
listener_config[options.trigger.listenFor] = {
fn: function() {
container = Ext.get(options.container || component.container.dom);
doResize.createDelegate(component)();
if (options.hideFirst === true)
component.show();
}
};
options.trigger.listenTo.on(listener_config);
} else {
component.on('render', function(component) {
parent = Ext.get(parent || component.el.dom.parentNode);
});
component.monitorResize = true;
component.doLayout = component.doLayout.createInterceptor(function() {
var pos = this.getPosition();
var size = parent.getViewSize();
this.setSize(size.width - pos[0], size.height - pos[1]);
if (options.hideFirst === true)
component.show();
},component);
}
}
};
};

example:


this.navigation.select.arabic = {};
this.navigation.select.arabic.reader = new Ext.data.JsonReader({
root: 'select_arabic',
id: 'rendition_id'
},[{
name: 'name', mapping: 'name'
},{
name: 'rendition_id', mapping: 'rendition_id'
}]);
this.navigation.select.arabic.store = new Ext.data.Store({
reader: this.navigation.select.arabic.reader
});
this.navigation.select.arabic.combo = new Ext.form.ComboBox({
plugins: [
new Ext.ux.plugins.navigation.default.settings.ComboBox({
id: 'select_arabic',
emptyText: 'Select: Arabic Font',
title: 'Arabic Font',
store: this.navigation.select.arabic.store,
displayField: 'name',
valueField: 'rendition_id'
}),
new Ext.ux.plugins.FitToContainer({
width_adjust: -28,
x_adjust: 6,
y_adjust: 4,
hideFirst: true,
height: false,
trigger: {
listenTo: this.navigation.select.arabic.store,
listenFor: 'load'
}
})
]
});


By the way, how does one apply syntax highlighting to code blocks in this forum?

mystix
8 Jul 2008, 5:33 PM
By the way, how does one apply syntax highlighting to code blocks in this forum?
stock
tags may contain tags, but don't provide built-in syntax highlighting.

tags do, but introduce a double line spacing which, imo, makes code harder to read.

take your pick ;)

gthe
9 Jul 2008, 5:00 AM
Don't work for TabPanel, that rendered to html div. Error in row:

parent = Ext.get(parent || component.el.dom.parentNode);But http://extjs.com/forum/showthread.php?t=28318 work ok.

Thanks.

p.s. i try

parent = Ext.get(options.parent || component.el.dom.parentNode); without effect
p.s.s. bug in IE and Opera only.