PDA

View Full Version : Accessing data between different views



driley
27 Feb 2013, 10:48 AM
I have been banging my head against a wall in an attempt to access data in one view (container) from another (container).
I am getting the correct object from my store in an afterrender event:



setTimeout(function() {//I have to set this timeout so that it works.
Ext.select("div.group-container").on("click", function (e,t) {

var bcgIndex = this.id.replace('bcg-','');
var bcg = Shared.config.getObject('baseCodeGroups')[bcgIndex];

abstractcomponent.up('BYO').layout.setActiveItem(1);
});
},500);


This event then switches from the view the user is currently in (BYO.view.GroupPicker, it's a container) and goes to the parent container (BYO.view.BYO). The parent container then switches the view to 'groupSel1':



initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'groupPicker'
},
{
xtype: 'groupSel1'
}
]
});


me.callParent(arguments);
}


My current issue is that I'm trying to access the object that was able to be referenced in the previous view.

var bcg = Shared.config.getObject('baseCodeGroups')[bcgIndex];

I am new to Ext js and Sencha but I should have been able to complete the aforementioned task by now and it's really irking me. If the approach that I am taking to access, or even store data is incorrect please advise.
All help is appreciated in advance.

Thanks for your time.

driley
27 Feb 2013, 12:09 PM
I've been doing a little bit more digging and came across the phrase:

The important part is doing something with the component before you make it active.

So I edited my afterrender event to:



setTimeout(function() {//I have to set this timeout so that it works.
Ext.select("div.group-container").on("click", function (e,t) {


var bcgIndex = this.id.replace('bcg-','');
var bcg = Shared.config.getObject('baseCodeGroups')[bcgIndex];


abstractcomponent.up('BYO').layout.setActiveItem(bcg);
abstractcomponent.up('BYO').layout.setActiveItem(1);
});
},500);


And I receive the error:
Uncaught TypeError: Object #<Object> has no method 'getItemId'

I am assuming that I cannot pass an object, it must be a component, but I'm not sure...

Should I be using a controller as opposed to Event Bindings?

driley
27 Feb 2013, 12:52 PM
Okay, so I believe my issue is in that I haven't done ANYTHING with anything, I'm just getting the object and trying to send it to the main view, which is probably completely wrong.

So I checked my self into an inpatient mental clinic and as I was getting released I realized that the important phrase declared above means that I actually have to do something with the object. So in using Ext.ComponentQuery.query (learn more in the docs, quite self explanatory: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery) I have successfully altered the view that I wanted to.



setTimeout(function() {//I have to set this timeout so that it works.
Ext.select("div.group-container").on("click", function (e,t) {


var bcgIndex = this.id.replace('bcg-','');
var bcg = Shared.config.getObject('baseCodeGroups')[bcgIndex];


var name = bcg.name;
var newName = Ext.ComponentQuery.query('#model-editor')[0];
newName.update(name);


abstractcomponent.up('BYO').layout.setActiveItem(1);
});
},500);


So I have put the name I was looking for from my object into the first position of my dataView array. That's what #model-editor represents, it's the dataview with in the container I wanted to manipulate. And that's awesome but...

I want to place this name in an HTML element within the dataview and can't seem to figure it out. The HTML that I have in place is written within a template (<tpl>) in the dataView. I have a paragraph tag in the tpl with a class and I want this name to be placed within it. Here is the dataView:



Ext.applyIf(me, {
items: [
{
xtype: 'dataview',
cls: 'model-editor',
floating: false,
id: 'model-editor',
tpl: [
'<tpl>',
' <p class="greatScottIGotIt"></p>',
'</tpl>'
],
width: 300,
autoScroll: false,
itemCls: 'byo-modify',
itemSelector: '.BFCM_wrapper',
store: 'BaseCodeGroupsStore'
}


I have removed some of the tpl code, that's why the itemSelector doesn't make sense.

Anyone got this for me please?

driley
27 Feb 2013, 2:23 PM
Back again!
So what I did was create a custom component since it seems as if Ext.ComponentQuery.query can only use xtypes or component id's. This is my custom component:



Ext.define('BYO.view.custDropDownComp', {
extend: 'Ext.Component',
alias: 'widget.custDropDownComp',


height: 200,
style: 'position: absolute;\n top: 195px;\n right: 390px;\n color: white;\n font-size: xx-large;',
width: 300,


initComponent: function() {
var me = this;


me.callParent(arguments);
}


});


To create the custom component in my container I just drag and dropped a 'Component' and right clicked on it and Promoted it to a class. I then edited the style attribute of the component to display the name where and how I wanted it.

So now in my afterrender event I am setting the HTML of my custom component to the name derived from my store:



setTimeout(function() {//I have to set this timeout so that it works.
Ext.select("div.group-container").on("click", function (e,t) {


var bcgIndex = this.id.replace('bcg-','');
var bcg = Shared.config.getObject('baseCodeGroups')[bcgIndex];


var name = bcg.name;
var newName = Ext.ComponentQuery.query('customLabel')[0];
newName.update(name);


abstractcomponent.up('BYO').layout.setActiveItem(1);
});
},500);


Here is my new question. I understand that this code: Ext.ComponentQuery.query('customLabel')[0];
is setting the HTML value of my custom component.
How do i set other attributes other than HTML?

Thanks in advance.