select item in a view when object is hold in memory

[steffenk]

Hi,

i hope the title tells what i try to do.

If !dialog, i got the selection with view.on("load",...)
but when i hide the dialog and reopen with anotherlink (and another id) i don't know how to reference it right.

Here is my code (i marked red what i look for):

var FriendsPanel = function(){
    // everything in this space is private and only accessible in the HelloWorld block
    
    // define some private variables
    var dialog, showBtn,id;
    
    
    // return a public interface
    return {
        init : function(){
                                  
        },
       
        showDialog : function(id){
            if(!dialog){ // lazy initialize the dialog and only create it once
                dialog = new Ext.LayoutDialog("friends-dlg", { 
                        modal:true,
                        width:600,
                        height:400,
                        shadow:true,
                        minWidth:300,
                        minHeight:300,
                        proxyDrag: true,
                        west: {
	                        split:true,
	                        initialSize: 150,
	                        minSize: 100,
	                        maxSize: 250,
	                        titlebar: true,
	                        collapsible: true,
	                        animate: true,
                            autoScroll:true
	                    },
	                    center: {
	                        autoScroll:true,
	                        tabPosition: 'top',
	                        closeOnTab: true,
	                        alwaysShowTabs: true,
                            animate: true
	                    }
                });
                dialog.addKeyListener(27, dialog.hide, dialog);
                dialog.addButton('Schliessen', dialog.hide, dialog);
                  
                var layout = dialog.getLayout();
                 
                layout.beginUpdate();
                var wl=layout.add('west', new Ext.ContentPanel('west', {title: 'Freunde'}));
	            var cl=layout.add('center', new Ext.ContentPanel('center', {title: 'Details'}));
                
                
	            layout.endUpdate();
                
                var reader = new Ext.data.JsonReader({
                        totalProperty: 'results',
		                root:'items'
                }, [{name: 'uid'}, {name: 'name'}]);
                var reader2 = new Ext.data.JsonReader({
                        totalProperty: 'results',
		                root:'items'
                }, [{name: 'uid'}, {name: 'name'}, {name: 'image'}]);
                
                ds = new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({
                        url: 'index.php?id=1&type=1001&data=friends'
                    }),
                    reader : reader
                });
                ds2 = new Ext.data.Store({
                    proxy: new Ext.data.HttpProxy({
                        url: 'index.php?id=1&type=1001&data=cities&bl='
                    }),
                    reader : reader2
                });
                
                ds.on('load', this.onLoad, this);
                ds2.on('load', this.onLoad, this);
            
                var tpl = new Ext.Template(
                  '<div class="friend-item" id="fi_{uid}">' +     
                  '<a href="#" id="f_{uid}">{name}</a>' +
                  '</div>'
                );
                tpl.compile();
                var tpl2 = new Ext.Template(
                  '<div class="friend-detail">' +
                  '<h2>{name}</h2>' +
                  '<p><img src="{image}" /></p>' +
                  '<p>{userpage}</p>' +
                  
                  '</div>'
                );
                tpl2.compile();
                
                var view = new Ext.JsonView(Ext.get('west'), tpl, {
                   jsonRoot: ds,
                   selectedClass: 'selfriend',
                   singleSelect: true
                });
                var detail = new Ext.JsonView(Ext.get('center'), tpl2, {
                   jsonRoot: ds2
                });
                
                view.prepareData = function(data){
                    return {
                        uid: data.uid,
                        name: data.name.replace(/<\/?[^>]+>/gi, '').ellipse(350)
                    
                    };
                };
                view.on("click", function(vw, index, node, e){
                    //alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
                    detail.load('index.php?id=1&type=1001&data=friends&bl='+node.firstChild.id);
                });
                
                view.load('index.php?id=1&type=1001&data=friends');
                
                view.on("load",function() {view.select('fi_'+id.substring(2));});   
                detail.load('index.php?id=1&type=1001&data=friends&bl='+id); 
                     
            }  else {
                //select the right user here
                 view.on("load",function() {view.select('fi_'+id.substring(2));}); //doesn't work
            }
            ext9=Ext.get('ext-gen9');
            dialog.show(ext9.dom);
        }
    };
}();

[Animal]

                 view.on("load",function() {
                     view.select('fi_'+id.substring(2));
                  }); //doesn't work

Format it like that, set a breakpoint in that function, and debug it like a programmer!

[steffenk]

wow, very fast

i did, but the error is "view has no properties" i don't know why.

thx

[steffenk]

when i debug at this point, no object of the dialog is defined, so i don't know how to reference it the right way or how to make view public outside dialog.

[Animal]

You have "var view" in one side of your if...else. That's a local variable. Obviously on the other side of your else there is no variable called "view".

Think about it. Where should that declaration go? Have you programmed C? (Or almost any other language) Same principle.

[steffenk]

Hi Animal,

i tried to do it that way:

var FriendsPanel = function(){
    
    // define some private variables
    var dialog, view;
    ... 

But it doesn't help. Because i'm inside FriendsPanel view should be known, why not ?

ps i come from php, C is a very long time ago. In phpclass it's the same, i can reach this vars with this.var - in this case it doesn't work. So i would very glad if you could help me, thx.


//edit
ok, i got it public, i changed inside all view to this.view - but now the select doesn't work (view is known outside now!)
Is that wrong syntax ?

//snip
this.view = new Ext.JsonView(Ext.get('west'), tpl, {
                   jsonRoot: ds,
                   selectedClass: 'selfriend',
                   singleSelect: true
                });
                var detail = new Ext.JsonView(Ext.get('center'), tpl2, {
                   jsonRoot: ds2
                });
                
                this.view.prepareData = function(data){
                    return {
                        uid: data.uid,
                        name: data.name.replace(/<\/?[^>]+>/gi, '').ellipse(350)
                    
                    };
                };
                this.view.on("click", function(vw, index, node, e){
                    detail.load('index.php?id=1&type=1001&data=friends&bl='+node.firstChild.id);
                });
                
                this.view.load('index.php?id=1&type=1001&data=friends');
                //alert('fi_'+id.substring(2));
                this.view.on("load",function() {
                   this.view.select('fi_'+id.substring(2)); //now there is no selection
                }); 

[Animal]

Why doesn't it work?

[steffenk]

good question - i don't understand - error is "this.view has no properties"

I made this snippet on a extra page so you can see this script live:
http://www.sk-typo3.de/ExtJS-Dialog.338.0.html

It worked with the local var, so i have no idea why it doesn't now.

[steffenk]

got it - in this case it has to be in this way:

this.view.on("load",function() {
   this.select('fi_'+id.substring(2)); //now there is no selection
}); 

and outside only

   this.view.select('fi_'+id.substring(2));