PDA

View Full Version : Resizers



tvanzoelen
27 Dec 2011, 7:00 AM
How to set resizers in the beta? I did it previously in the render method, but I get an el is undefined error in the ieTable function.




Ext.define('ASLAS.resizer.TextResizer', {
extend: 'Ext.resizer.Resizer',
alias: 'as.textresizer',
dynamic: true,
handles: 'e',
pinned: false,
wrap: true
});

Ext.define('ASLAS.formfield.Text', {
extend: 'Ext.form.field.Text',
alias: 'as.text',
fieldCls: 'aslas_text_field',
focusCls: 'aslas_focus_field',
disabledCls: 'aslas_form_field_disabled',
enableKeyEvents: true,
validateOnChange: false,
listeners: {
render: {
fn: function(component, eOpts) {
Ext.create('as.textresizer', {
screen: this.screen,
target: this
});

}
}
}
});



Code like above is not working anymore. Has it to do with the new render flow?

mitchellsimoens
27 Dec 2011, 7:07 AM
You shouldn't put listeners on the prototype like you are. Is it even firing in beta 1?

tvanzoelen
27 Dec 2011, 7:10 AM
Yes it is firing. Does it solve the problem if I put the listeners in the config?

mitchellsimoens
27 Dec 2011, 7:14 AM
Just been getting a few reports that it wasn't working in beta 1 for other people.

The problem with putting the listeners on the prototype like that is your class needs them to work. What if down the road you need to set a listener on that component? It will overwrite the ones you put on the prototype and you have now possibly broken your class. It is much better to use this.on in initComponent

tvanzoelen
27 Dec 2011, 7:24 AM
Ok thanx, I have put the listeners in the initComponent, but still the el.nextSibling is null error

in the function ieTable line 12364 in ext-all-dev.js


ieTable: function(depth, s, h, e){
this.tempTableEl.innerHTML = [s, h, e].join('');

var i = -1,
el = this.tempTableEl,
ns;

while (++i < depth) {
el = el.firstChild;
}

ns = el.nextSibling; // <-- breaks here, why not an is null check?

if (ns) {
var df = document.createDocumentFragment();
while (el) {
ns = el.nextSibling;
df.appendChild(el);
el = ns;
}
el = df;
}

return el;
},

mitchellsimoens
27 Dec 2011, 7:26 AM
Never said that would fix it. Just trying to get people not to do that.

tvanzoelen
27 Dec 2011, 7:28 AM
I will never do it again :)

tvanzoelen
27 Dec 2011, 7:55 AM
Here's a simple code example to test on.



Ext.onReady(function() {

Ext.define('MyResizer', {
extend: 'Ext.resizer.Resizer',
dynamic: true,
handles: 'e',
pinned: false,
wrap: true
});

var simple = Ext.create('Ext.form.Panel', {
url: 'save-form.php',
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},

items: [{
fieldLabel: 'First Name',
name: 'first',
listeners: {

render: {
fn: function(comp) {
Ext.create('MyResizer', {
target: this

});
}
}

},
allowBlank: false
}]
});

simple.render(document.body);
});

LesJ
27 Dec 2011, 8:00 AM
You shouldn't put listeners on the prototype like you are.

This is an important point... but look at the internal documentation... here's a code fragment from the "Ext.AbstractComponent" class...

...and what do I see? ... a listener is set up on the prototype 8-|

Ext.create('Ext.Component', {
renderTo: Ext.getBody(),
renderTpl: [
'<h1 class="title">{title}</h1>',
'<p>{desc}</p>'
],
renderData: {
title: "Error",
desc: "Something went wrong"
},
renderSelectors: {
titleEl: 'h1.title',
descEl: 'p'
},
listeners: {
afterrender: function(cmp){
// After rendering the component will have a titleEl and descEl properties
cmp.titleEl.setStyle({color: "red"});
}
}
});

mitchellsimoens
27 Dec 2011, 8:04 AM
That's using Ext.create which means it's a config. Yes, it is put onto the prototype via applying the config but I mean you shouldn't use it with Ext.define like that.

tvanzoelen
27 Dec 2011, 8:07 AM
Yes thats in the config... but thats not the discussion here......

how to solve this problem?

tvanzoelen
27 Dec 2011, 8:15 AM
Ext.onReady(function() {

var simple = Ext.create('Ext.form.Panel', {
url: 'save-form.php',
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},

items: [{
fieldLabel: 'First Name',
name: 'first',
resizable: true,
allowBlank: false
}]
});

simple.render(document.body);
});


resizable: true

is even breaking up the the form

skirtle
27 Dec 2011, 8:30 AM
I think the test case can be simplified a little more than that:


Ext.onReady(function() {
Ext.create('Ext.form.field.Text', {
renderTo: Ext.getBody(),
resizable: true
});
});

Works fine with 4.0.7, explodes with 4.1.0-beta-1.

tvanzoelen
27 Dec 2011, 8:34 AM
If you don't mind skirtle, I use your code sample in my bug report. :)

dongryphon
27 Dec 2011, 11:23 AM
Just to double check, the resizers in all cases are being applied to a form field, correct? I have a theory why this might be a problem, but I will dig in on it shortly.

If you need to work around this for now, you might be able to wrap the field in a simple container using a 'fit' layout. This should not be necessary, but just a temporary workaround.

dongryphon
27 Dec 2011, 11:23 AM
And thanks for all the examples to demonstrate the problem :)

dongryphon
27 Dec 2011, 11:51 AM
This appears to be a duplicate of http://www.sencha.com/forum/showthread.php?167183-Resizers-on-TextFields-do-not-work-in-4.1-Beta

?

mitchellsimoens
27 Dec 2011, 12:06 PM
This appears to be a duplicate of http://www.sencha.com/forum/showthread.php?167183-Resizers-on-TextFields-do-not-work-in-4.1-Beta

?

Think that is the bug report that came from this thread.