View Full Version : Accessing view elements from whithin the view

21 Apr 2012, 8:55 PM
Hi all,
How do i get element in my view from the view code.
For example my widget1 controller calling a method on the voew to update the UI and i have several view item that I whish to changes their text or any other propery.
the items were created using the items property on the view.
Whats the right way: ext.getCmp, ext.get or what?


21 Apr 2012, 10:09 PM
Without seeing any of your code this is a very difficult question to answer.

Definitely not Ext.getCmp. Passing a fixed id into Ext.get is just as bad.

Specifying items using the items config will be creating child components. If they're just some text then this is very bad for performance. e.g.:

// bad
new Ext.panel.Panel({
items: [
{html: 'Some text'},
{html: 'Some other text'},
{html: 'Yet more text'}

The code above creates 4 panels just to display a bit of HTML. One Ext.Component would suffice here.

Assuming you aren't using components gratuitously then your question still stands, how to update the text?

Some components, e.g. buttons, have methods like setText for just this purpose.

Most components have an update method to update their contents with arbitrary HTML. If you have child items then you'd call update on the items, not on the outer container.

If you have components with custom markup (possibly specified via autoEl or a template) and you just want to update certain elements then childEls is a good option:


21 Apr 2012, 10:22 PM
There should be a very simple solution to this since this is a very commom dev task.
In my example the view has some items, such as:

Ext.define('SA.view.widget2', { extend: 'Ext.panel.Panel', alias: 'widget.widget2', layout: 'fit', title: 'Widget number 2', html: 'Widget number 2', items: [ { xtype: 'image', src: 'Images/Hungry.png', id: 'img1', itemId: 'img1' } ],And i want to change this image src when some appliaction event occurs.

21 Apr 2012, 10:24 PM
By the way,
in the sample you posted there is a reference to the view item needs to be updated. I am asking how do i access this item /element when it is not part of the event handler argument.

21 Apr 2012, 10:44 PM
Please use [CODE] tags when posting code.

So here's a slightly simplified version of your code.

Ext.define('SA.view.widget2', {
extend: 'Ext.panel.Panel',
items: [{
xtype: 'image',
src: 'Images/Hungry.png',
itemId: 'img1'

Now let's say we have a reference to an instance of widget2:

var myPanel = Ext.create('SA.view.widget2');

There are many, many ways to update the image URL from here. Some examples:

// Grab the first child that is an image component - the selector is optional

// Grab the first descendant that is an image component - the selector is optional

// Grab all image descendants and update the first one - the selector is optional

// Query by itemId. Theoretically you could use id but you shouldn't use static ids

// A bit like queryById but only considers immediate children

// getComponent also supports accessing children by index

Hopefully one of those will meet your needs. See the Container docs for more info on each one.

21 Apr 2012, 11:29 PM
Thank you
This was what I looked for