Setting HTML attributes easily with Ext JS

Well a short time since i last blogged I know, sorry about that… hello facebook readers – if there are any!

This wasn’t immediately obvious to me when I first started using the Ext JS library, but there is a really neat way of setting HTML attributes.

Firstly we need a DOM element to play with…(assuming you have got a simple page to play around with…)


var my-div = Ext.get('my-element');

then we go about setting its attributes…


my-div.set({

class :  'rounded-corners',

title : 'This is my example div'

});

Of course you could do the whole code in one call


Ext.get('my-element').set({

class :  'rounded-corners',

title : 'This is my example div'

});

Either way you choose I think its a really nice way of setting attributes…

Written by jameshd

1st April, 2008 at 3:06 pm

Posted in Ext / Javascript

Tagged with attributes, DOM, Ext, HTML Element, javascript

6 Responses

Subscribe to comments with RSS.

I was also trying to find out how I can set the attributes and finally found this site.
I tried this simple js and it is not working.

js:
Ext.onReady(function(){
var p = new Ext.Panel({
title: ‘My Panel’,
collapsible:true,
renderTo: ‘container’,
width:400,
html: Ext.example.bogusMarkup
});
mydiv=Ext.get(‘container’);
mydiv.set({ title: ‘new panel’ });
});

I have the div id=’container’ on my html. The funny thing that happens is that the title value is following my cursor. Please help. Thanks.

Prabakar

5th August, 2008 at 12:46 am

Reply

Hi Prabaker,
You have not given your Panel an Id thus you cannot access any of the methods needed to manipulate it.
Plus I think the set method will only set html attributes. Not attribute of components. Check out his code, also notice the getCmp method!

Ext.onReady(function(){
  var p = new Ext.Panel({
       title: 'My Panel',
       collapsible:true,
       renderTo: 'my-div',
       width:400,
       html: 'hello world',
       id : 'container-panel'
    });

    myPanelObject = Ext.getCmp('container-panel'); // get the actual panel object
    myPanelObject.setTitle('new panel');
});

Administrator

5th August, 2008 at 4:06 pm

Thankyou for straightening me out regarding id. Your code worked. But I have a general question. Don’t we have a simple method in ext js that will work for changing the attributes of components? I was experimenting with title just as an example. But my requirement is to change any of the properties of the component.
Thanks for your help.
Prabakar.

Prabakar

5th August, 2008 at 8:51 pm

Reply
Hi Prabakar,
Sorry for the delayed response – I’ve been on my summer hols!

You should, once you have called Ext.getCmp(‘component-id’);
Be able to use any of the methods listed as public in the Ext API documentation for that component.
Certain properties may not be able to be manipulated directly on some components, but most can.

Administrator

11th August, 2008 at 11:19 pm

Reply
Guys,
I found a simpler solution. In the config that is passed to Ext.Panel (or whatever Component/BoxComponent) specify this: { autoEl : { tag : ‘div’, title : ‘helloo world’ } }.

Saad Malik

3rd August, 2011 at 11:29 pm

Reply
thanks a lot. i was searching for this for days.

Malith

20th September, 2011 at 4:49 am

Reply

ExtJS Javascript Library for Beginners!