PDA

View Full Version : this.ui has no properties



captainm1uk
18 Oct 2007, 1:49 AM
Hi

I have created a custom layout which is in the onLoad event. I have added the outline ui and the outline ui in the js header but when i click on the outline I get the above message.

Here is the onLoad script



Example = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'Bright Ideas Navigator'}));
layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
// layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.add('center', new Ext.ContentPanel('center', {title: 'Center Panel', closable: false}));
layout.getRegion('center').hidePanel('center1');
// layout.getRegion('west').hide();
layout.endUpdate();
},
toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show West Region';
}else{
west.show();
link.innerHTML = 'Hide West Region';
}
}
};

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);


Here is the js header



var myApp = function(){
return {
init:function(){
this.uiOutline = new Ext.nd.UIOutline({
outlineName:'Outline',useOutlineIcons:true,container:'myOutline',viewPanel:'myView',
});
var uiView = new Ext.nd.UIView({
viewName:'All Ideas',container:'myView',
});
}
}
}();
Ext.onReady(myApp.init, myApp, true);


And when I load it up in ie I get error Expected Identifier strung or number

Any help would be greatly appreciated

Zakaroonikov
18 Oct 2007, 2:33 AM
Hi

Here is the js header



var myApp = function(){
return {
init:function(){
this.uiOutline = new Ext.nd.UIOutline({
outlineName:'Outline',useOutlineIcons:true,container:'myOutline',viewPanel:'myView',
});
var uiView = new Ext.nd.UIView({
viewName:'All Ideas',container:'myView',
});
}
}
}();
Ext.onReady(myApp.init, myApp, true);


And when I load it up in ie I get error Expected Identifier strung or number

Any help would be greatly appreciated

The IE error is due to you having trailing commas in the above code in both the outline & view declaration (ie the ',' after 'myView' in both declarations). IE does like that but firefox is forgiving.

As for the other error I am not sure there what line does firebug say causes the problem?

captainm1uk
18 Oct 2007, 3:08 AM
Hi

The firstly thanks for the fist fix - something so simple - but hey - I am learing. The error from fire bug is extnd-all @ line 54

Thanks

Zakaroonikov
18 Oct 2007, 1:59 PM
Hi

The firstly thanks for the fist fix - something so simple - but hey - I am learing. The error from fire bug is extnd-all @ line 54

Thanks

You are best to include extnd-all-debug.js instead. That way you will be able to indentify the javascript code that is causing the problem. Using just the-all file shows a whole bunch of code on one line. If you are using the standard HTML Header Content from the extnd database then try adding &debug=true to the url and that should make use of all the debug files. Have you modified extnd-all at all? There is no reference to this.ui only this.uiView. Perhaps you accidentily put in a space?

captainm1uk
19 Oct 2007, 2:50 AM
Hi

I know why the error happens - just not sure how to fix it - the standard uioutline opens up the view in the center region in an iframe but my view now opens up in a panel
container : this.viewPanel

The error I am getting is this.uiView has no properties

Any one know ??

If RWaters is looking then can you assist as you know the code that is now in there - cheers

Zakaroonikov
19 Oct 2007, 5:00 AM
There is no declaration of this.uiView. Perhaps instead of:



var uiView = new Ext.nd.UIView({
viewName:'All Ideas',container:'myView',
});


you do:



this.uiView = new Ext.nd.UIView({
viewName:'All Ideas',container:'myView',
});

captainm1uk
19 Oct 2007, 5:05 AM
Hi

This is the recised js code which I have implemented - the above js which I put there has now changed



Example = function() {
return {
init: function() {
this.layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
tabPosition:'top',
closeOnTab: true
}
});

this.layout.beginUpdate();
this.layout.add('north', new Ext.ContentPanel('north', 'North'));
this.layout.add('south', new Ext.ContentPanel('south', {title: 'Help', closable: true}));
this.layout.add('west', new Ext.ContentPanel('west', {title: 'Bright Ideas Navigator'}));
this.layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
this.layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Statistics', closable: true}));
// layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
// this.layout.add('center', new Ext.ContentPanel('center', {title: 'Center Panel', closable: false}));
this.layout.getRegion('center').hidePanel('center1');
// layout.getRegion('west').hide();
this.layout.endUpdate();

this.uiOutline = new Ext.nd.UIOutline({
outlineName:'Outline',
useOutlineIcons:true,
container:'myOutline'
});
this.uiView = new Ext.nd.UIView({
viewUrl : '/Development/extnd_a2r1.nsf/By Author',
container : this.viewPanel,
// container : myView, //- this isn't needed the way we're doing it
layout : this.layout,
statusPanel : this.statusPanel
});
},

toggleWest: function(link) {
var west = layout.getRegion('west');
if (west.isVisible()) {
west.hide();
link.innerHTML = 'Show West Region';
} else {
west.show();
link.innerHTML = 'Hide West Region';
}
}
}
}();
Ext.onReady(Example.init, Example, true);

Zakaroonikov
19 Oct 2007, 7:11 PM
Hi

This is the recised js code which I have implemented - the above js which I put there has now changed



Example = function() {
return {
init: function() {
this.layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
tabPosition:'top',
closeOnTab: true
}
});

this.layout.beginUpdate();
this.layout.add('north', new Ext.ContentPanel('north', 'North'));
this.layout.add('south', new Ext.ContentPanel('south', {title: 'Help', closable: true}));
this.layout.add('west', new Ext.ContentPanel('west', {title: 'Bright Ideas Navigator'}));
this.layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
this.layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Statistics', closable: true}));
// layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
// this.layout.add('center', new Ext.ContentPanel('center', {title: 'Center Panel', closable: false}));
this.layout.getRegion('center').hidePanel('center1');
// layout.getRegion('west').hide();
this.layout.endUpdate();

this.uiOutline = new Ext.nd.UIOutline({
outlineName:'Outline',
useOutlineIcons:true,
container:'myOutline'
});
this.uiView = new Ext.nd.UIView({
viewUrl : '/Development/extnd_a2r1.nsf/By Author',
container : this.viewPanel,
// container : myView, //- this isn't needed the way we're doing it
layout : this.layout,
statusPanel : this.statusPanel
});
},

toggleWest: function(link) {
var west = layout.getRegion('west');
if (west.isVisible()) {
west.hide();
link.innerHTML = 'Show West Region';
} else {
west.show();
link.innerHTML = 'Hide West Region';
}
}
}
}();
Ext.onReady(Example.init, Example, true);



Have you declared the this.viewPanel anywhere? If you look at the source of DominoUI.js before creating the UIView I believe it creates a content panel on the center region. If you want to use a grid panel instead, then you will still need to create a dom element defined by this.viewPanel. Try using:

this.viewPanel = Ext.DomHelper.append( this.layout.getRegion('center').bodyEl, { tag :'div', id : 'NotesView'});

captainm1uk
20 Oct 2007, 1:42 AM
Would i place this in the dominoui or in the above code ?

Zakaroonikov
20 Oct 2007, 3:14 PM
Would i place this in the dominoui or in the above code ?

In the above code before the UIView call.

captainm1uk
21 Oct 2007, 5:33 AM
Many thanks - wil try it tomorrow morning when i get back in work - so much to learn but i think this stuff is great. Do you know if the desktop in ext2 will be available in extnd ?

Cheers

captainm1uk
22 Oct 2007, 2:53 AM
Hi - just put this in and now get this.uiview.grid has no properties when i click on a link in the outline and when the page loads in ff I get this.viewpanel has no properties

The uiview.grid error happens in ie and is in the uioutline of the extnd-all (see screen 2 of the attachments)

Here is the amended code from the js header


Example = function() {
return {
init: function() {
this.layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
tabPosition:'top',
closeOnTab: true
}
});

this.layout.beginUpdate();
this.layout.add('north', new Ext.ContentPanel('north', 'North'));
this.layout.add('south', new Ext.ContentPanel('south', {title: 'Help', closable: true}));
this.layout.add('west', new Ext.ContentPanel('west', {title: 'Bright Ideas Navigator'}));
this.layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
this.layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Statistics', closable: true}));
// layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
// this.layout.add('center', new Ext.ContentPanel('center', {title: 'Center Panel', closable: false}));
this.layout.getRegion('center').hidePanel('center1');
// layout.getRegion('west').hide();
this.layout.endUpdate();

this.uiOutline = new Ext.nd.UIOutline({
outlineName:'Outline',
useOutlineIcons:true,
container:'myOutline'
});
this.viewPanel = Ext.DomHelper.append( this.layout.getRegion('center').bodyEl, { tag :'div', id : 'NotesView'});
this.uiView = new Ext.nd.UIView({
viewUrl : '/Development/extnd_a2r1.nsf/By Author',
container : this.viewPanel,
// container : myView, //- this isn't needed the way we're doing it
layout : this.layout,
statusPanel : this.statusPanel
});
},

toggleWest: function(link) {
var west = layout.getRegion('west');
if (west.isVisible()) {
west.hide();
link.innerHTML = 'Show West Region';
} else {
west.show();
link.innerHTML = 'Hide West Region';
}
}
}
}();
Ext.onReady(Example.init, Example, true);


Here is the changes I made to the extnd-all to make the view auto expand/collapse

I changed this in the uiview



var container=(this.container.getEl)?this.container.getEl():this.container;var layout=Ext.BorderLayout.create({center:{panels:[new Ext.GridPanel(this.grid,{toolbar:this.toolbar,fitToFrame:true})]}},container);


To this


this.layout.add("center",new Ext.GridPanel(this.grid, {toolbar: this.toolbar, fitToFrame : true}));


Thanks


I have added the debug - the only error happens now when I click on an outline link I get "this.uiview has no properties"

I have attached a screen shot on the debug

RWaters
22 Oct 2007, 7:40 AM
Many thanks - wil try it tomorrow morning when i get back in work - so much to learn but i think this stuff is great. Do you know if the desktop in ext2 will be available in extnd ?

Cheers

I don't know that the desktop will directly translate well into Extnd (its not really similar to any existing notes functionality) That said, once we get things moved to Ext2 (in progress) it will be much easier to tweak and I expect it would be fairly simple to get the desktop up and running.

captainm1uk
22 Oct 2007, 7:55 AM
Hi RWaters

Can you help with the above issue - the error happens when i click on the outline - again a knock on effect from the work you helped me with before