PDA

View Full Version : How to add an Attribute to an Ext Object?



BlueSkye
14 Jun 2010, 3:18 AM
For example, if I have Ext.Button, or any of Ext objects

How can I associate a new attribute to it?

For example, if I need: "myPersonalAttribute" which is not one of the parameters for Ext.Button



new Ext.Button({myPersonalAttribute: 'myValue'});
This isn't working; so I was wondering how can I add some personal parameter to my object...

If it was I regolar object, I would just do:



dataRecord = {}
dataRecord.myPersonalAttribute = "myValue"Is there anything similar I can do with Ext Objects?

pavanextjs
14 Jun 2010, 5:17 AM
Try



var button = new Ext.Button({.....});
//now apply the custom attributes
Ext.apply({
myPersonalAttribute: 'myValue'
}, button);

Animal
14 Jun 2010, 5:32 AM
It IS a regular object.

Everything in Javascript is a regular object.

What else IS there?

Condor
14 Jun 2010, 5:33 AM
No, that would be:

button.myPersonalAttribute = 'myValue';
or

Ext.apply(button, {
myPersonalAttribute1: 'myValue1',
myPersonalAttribute2: 'myValue2'
});

pavanextjs
14 Jun 2010, 5:37 AM
sorry my mistake :)

BlueSkye
14 Jun 2010, 5:48 AM
But what if I have to build my buttons dinamically...?

How can I have and distinguish a "var button" for every Ext.Button I create?

(Sorry, I'm quite new to programming, I think it's quite simple but I can't see how to do it...)

Condor
14 Jun 2010, 5:52 AM
What exactly are you trying to do? I don't think you are asking the correct question!

BlueSkye
14 Jun 2010, 6:07 AM
What exactly are you trying to do? I don't think you are asking the correct question!

Sorry, you're right. I'll try to explain what I'm trying to do.

The user can add new Buttons when he makes particular actions; how the user "fires" the creation of new buttons isn't relevant. When the users creates a new Button, I create 2 elements: a Button and an HTML div in which the Button is rendered are created.
I need to incapsulate the Button in an HTML div in order to make what comes next easier .

I want the Button to know which is the id of his 'related' div.

For Example:


new Button({id: 'button1'});
Ext.DomHelper.append(document.body /* not relevant*/ , {id: button1_div, ...});
I want the button to know the ID of the div in which I incapsulate him. I thought to save the id of this div as an attribute of the button item; but if I use a "global" var button, then when I create a new button, I lose the reference to that object.

So, my question is:
How can my div know which Ext.Button he contains, and how can my Ext.Button know the id of the div in which he is rendered?

I tried to get the "renderTo" attribute after the render of the Ext.Button, but I guess that's private.. or maybe I'm calling it wrongly...

I hope I've explained myself somehow...

Animal
14 Jun 2010, 6:25 AM
No such thing as private. The renderTo property is not there. It is one of the config options that does not end up as a property.

There's tons of ways to find the parent node.

Learn to traverse the DOM.

As a web programmer, you MUST understand DOM structure. You can't get on with out that!

http://www.w3.org/TR/REC-html40/

Ecmascript (That's Javascript to you and me) binding for the DOM core: http://www.w3.org/TR/DOM-Level-3-Cor...t-binding.html

Ecmascript binding for the HTML DOM subclasses: http://www.w3.org/TR/DOM-Level-2-HTM...t-binding.html

These details are mostly abstracted away by the Ext.Element wrapper class, but I recommend that you bookmark, and over the next few months, learn the structure of those documents.

Condor
14 Jun 2010, 6:25 AM
I would use:

var id = Ext.id(null, 'button-');
new Button({id: id, ...});
Ext.DomHelper.append(document.body, {id: id, ...});

BlueSkye
14 Jun 2010, 6:30 AM
Ecmascript (That's Javascript to you and me) binding for the DOM core: http://www.w3.org/TR/DOM-Level-3-Cor...t-binding.html

Ecmascript binding for the HTML DOM subclasses: http://www.w3.org/TR/DOM-Level-2-HTM...t-binding.htmlAnimal: Thanks a lot, I'll take a look for sure! EDIT: these links aren't working, but I'll search on google by myself ;)

Condor: what does Ext.id does? Can't find it in the API documentation

fay
14 Jun 2010, 6:40 AM
http://www.extjs.com/deploy/dev/docs/?class=Ext&member=id

BlueSkye
14 Jun 2010, 6:47 AM
I would use:

var id = Ext.id(null, 'button-');
new Button({id: id, ...});
Ext.DomHelper.append(document.body, {id: id, ...});

But wouldn't this create two DOM elements with the same id? The Button and the div?

Condor
14 Jun 2010, 9:14 AM
Not if you are using applyTo instead of renderTo.

BlueSkye
14 Jun 2010, 1:23 PM
Not if you are using applyTo instead of renderTo.


Specify the id of the element, a DOM element or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component.Mh.. I've already seen this config, but I can't get how to use it, and what it does exactly.

Can I ask you to show me a simple example usage with a little explanation?

(Thanks for your time ) :)

CrazyEnigma
14 Jun 2010, 2:15 PM
From my perspective, I don't think you should be messing with the DOM. I never had to mess with it. DOM manipulation would be very useful if you were to create a custom component that every one else used that was really quite unique that you couldn't use others existing EXT JS components to build it. The button itself creates the div tags necessary. It's already there.

Why do you need to manage the DOM on top of the components you instantiate? EXT JS manages the DOM for you so you don't have to.

When you are building a dynamic site, I would never use "id", and Ext.getCmp(). Because, if you don't understand that the "id" has to be unique, you get undesirable results. There are ways around this problem: Ext.getCmp() is a lazy man's way to call items. "id" on the other hand has its use, but the use is limited. (a singleton pattern; viewport) As fay pointed out, you can use the EXT's id generator for uniqueness.

You can add buttons to any component that inherits a "Container", just by simply using the add() method.

BlueSkye
14 Jun 2010, 11:29 PM
From my perspective, I don't think you should be messing with the DOM. I never had to mess with it. DOM manipulation would be very useful if you were to create a custom component that every one else used that was really quite unique that you couldn't use others existing EXT JS components to build it. The button itself creates the div tags necessary. It's already there.

Why do you need to manage the DOM on top of the components you instantiate? EXT JS manages the DOM for you so you don't have to.

When you are building a dynamic site, I would never use "id", and Ext.getCmp(). Because, if you don't understand that the "id" has to be unique, you get undesirable results. There are ways around this problem: Ext.getCmp() is a lazy man's way to call items. "id" on the other hand has its use, but the use is limited. (a singleton pattern; viewport) As fay pointed out, you can use the EXT's id generator for uniqueness.

You can add buttons to any component that inherits a "Container", just by simply using the add() method.

I tried with that approach: have my panel and add() my components. But I've got to "incapsulate" every component with Ext.dd.DD and then Ext.Resizable , in order to make them able to move around. But Ext.dd.DD and Ext.Resizable needs the button to be already added and rendered to the panel before I can add Ext.dd.DD and Ext.Resizable to the button.
The problem was that when I added a new button and refreshed the layout with doLayout(), the buttons I added before this last one lost their Ext.dd.DD and Ext.Resizable, and the whole panel became a mess...
I couldn't find a solution to it, because Resizable to be applied to a component need "wrap: true" which created another div which incapsulated the component. So I had two divs that I can't bind together, and I had to add the buttons to the container before applying to them Ext.dd.DD and Ext.Resizable.. so when I refreshed the layout, it just recognized the buttons without Ext.dd.DD and Ext.Resizable... I don't know if I explained myself somehow :)

So I decided to create my own div and render the component to it, and it solved my layout problems.. Also if this approach is not that great, it's working quite well by now...


This is a sample of the code that gave me trouble:

It doesn't even add textfield when I say him to (x,y)


<script type="text/javascript">
var counter = 0;
Ext.onReady(function(){

// I create my panel
var my_panel = new Ext.Panel({
renderTo: document.body,
layout: 'absolute',
title: 'MyPanelTry',
id: 'my_panel_id',
height: 500,
width: 600
});

/* I create a toolbar with a button that creates
* textfield which are resizable and draggable inside
* the panel I created before
*/
var tb = new Ext.Toolbar({
renderTo: 'my_panel_id',
items: [{
text: 'add_textfield',
// an handler that inserts a new TextField
handler: function(){
counter++;
my_textbox = new Ext.form.TextField({
// renderTo: 'my_panel_id',
id: 'my_textbox_' + counter,
emptyText: 'my_textbox_' + counter,
width: 150,
height: 250,
x: 10 /* + counter*10 */,
y: 10 /* + counter*10 */,
listeners: {
'afterrender': function(){
// I create a resizer
var resizer = new Ext.Resizable('my_textbox_' + counter, {
wrap: true,
enabled: true,
pinned: true

});

var my_dd = new Ext.dd.DD(resizer.getEl(), {
id: 'my_dd_' + counter,
maintainOffset: true,
scroll: true
});
}
}
});
my_panel.add('my_textbox_' + counter);
my_panel.doLayout();


}


}]
});
});
</script>