PDA

View Full Version : Accessing view elements from whithin the view



pinidbest
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?

Thanks

skirtle
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:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.AbstractComponent-cfg-childEls

pinidbest
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.

pinidbest
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.

skirtle
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
myPanel.child('image').setSrc('...');

// Grab the first descendant that is an image component - the selector is optional
myPanel.down('image').setSrc('...');

// Grab all image descendants and update the first one - the selector is optional
myPanel.query('image')[0].setSrc('...');

// Query by itemId. Theoretically you could use id but you shouldn't use static ids
myPanel.queryById('img1').setSrc('...');

// A bit like queryById but only considers immediate children
myPanel.getComponent('img1').setSrc('...');

// getComponent also supports accessing children by index
myPanel.getComponent(0).setSrc('...');

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

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

Nelson2100
19 Jul 2012, 3:21 AM
This is not a difficult job to get any store's data and out this in one forum you just make a software which
is elated with your store and were you keep your all the data and store it in to this software you just open
the software and copy all the data or if you have feel any problem then you just go to the source of
your data and copy from here

Shop Fronts (http://adishopfronts.com/)