PDA

View Full Version : [2.0b1] FormPanel Problem



FuryVII
20 Oct 2007, 8:12 PM
This is pretty weird. It works fine in FF (again) and IE has strange behavior.

I have extended the window class to create a window with a formpanel just like feedviewer does (FeedWindow). The problem is that with each window spawned as a new object, only the first form field winds up on the proper form and the rest go to the first window's formpanel.

I was able to duplicate it within FeedViewer by allowing it to create more than one window. So in the FeedViewer Example I create the first, then destroy it, and finally create another. The image shows the results.

I am posting it here because it works fine in FF and IE doesn't like it. The formpanel should belong to the window that creates it, but somehow the second window appends fields to the first.

I might have a misunderstanding of how this "should" work too.

FuryVII
20 Oct 2007, 8:25 PM
More particular to my example, I have a TabPanel that can have a Panel that contains a Grid with a toolbar that has a search function. Upon hitting the search function a window with a FormPanel appears. Each window is subclassed and spawns its own object with its own search form and grid.

It all works great in FF, but in IE any addtional search windows have the ever form field but the first show on the first search window's form.

Same as above really.

mystix
20 Oct 2007, 9:05 PM
as mentioned 13985, some sample code which demonstrates how you're creating your forms and windows would be good. thanks.

FuryVII
21 Oct 2007, 4:30 AM
Here you go. Just save this as FeedPanel.js and drop it in the FeedViewer example. THe only change was the addition of a second button and a separate function to open a second window. Works fine on FF and IE gets all crazy.


/*
* Ext JS Library 2.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

FeedPanel = function() {
FeedPanel.superclass.constructor.call(this, {
id:'feed-tree',
region:'west',
title:'Feeds',
split:true,
width: 225,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'5 0 5 5',
cmargins:'5 5 5 5',
rootVisible:false,
lines:false,
autoScroll:true,
root: new Ext.tree.TreeNode('Feed Viewer'),
collapseFirst:false,

tbar: [{
iconCls:'add-feed',
text:'Window 1',
handler: this.showWindow1,
scope: this
},{
iconCls:'add-feed',
text:'Window 2',
handler: this.showWindow2,
scope: this
},{
id:'delete',
iconCls:'delete-icon',
text:'Remove',
handler: function(){
var s = this.getSelectionModel().getSelectedNode();
if(s){
this.removeFeed(s.attributes.url);
}
},
scope: this
}]
});

this.feeds = this.root.appendChild(
new Ext.tree.TreeNode({
text:'My Feeds',
cls:'feeds-node',
expanded:true
})
);

this.getSelectionModel().on({
'beforeselect' : function(sm, node){
return node.isLeaf();
},
'selectionchange' : function(sm, node){
if(node){
this.fireEvent('feedselect', node.attributes);
}
this.getTopToolbar().items.get('delete').setDisabled(!node);
},
scope:this
});

this.addEvents({feedselect:true});

this.on('contextmenu', this.onContextMenu, this);
};

Ext.extend(FeedPanel, Ext.tree.TreePanel, {

onContextMenu : function(node, e){
if(!this.menu){ // create context menu on first right click
this.menu = new Ext.menu.Menu({
id:'feeds-ctx',
items: [{
id:'load',
iconCls:'load-icon',
text:'Load Feed',
scope: this,
handler:function(){
this.ctxNode.select();
}
},{
text:'Remove',
iconCls:'delete-icon',
scope: this,
handler:function(){
this.ctxNode.ui.removeClass('x-node-ctx');
this.removeFeed(this.ctxNode.attributes.url);
this.ctxNode = null;
}
},'-',{
iconCls:'add-feed',
text:'Add Feed',
handler: this.showWindow,
scope: this
}]
});
this.menu.on('hide', this.onContextHide, this);
}
if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}
if(node.isLeaf()){
this.ctxNode = node;
this.ctxNode.ui.addClass('x-node-ctx');
this.menu.items.get('load').setDisabled(node.isSelected());
this.menu.showAt(e.getXY());
}
},

onContextHide : function(){
if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}
},

showWindow1 : function(btn){
if(!this.win){
this.win = new FeedWindow();
}
this.win.show(btn);
},
showWindow2 : function(btn){
if(!this.win2){
this.win2 = new FeedWindow();
}
this.win2.show(btn);
},


selectFeed: function(url){
this.getNodeById(url).select();
},

removeFeed: function(url){
var node = this.getNodeById(url);
if(node){
node.unselect();
Ext.fly(node.ui.elNode).ghost('l', {
callback: node.remove, scope: node, duration: .4
});
}
},

addFeed : function(attrs, inactive, preventAnim){
var exists = this.getNodeById(attrs.url);
if(exists){
if(!inactive){
exists.select();
exists.ui.highlight();
}
return;
}
Ext.apply(attrs, {
iconCls: 'feed-icon',
leaf:true,
cls:'feed',
id: attrs.url
});
var node = new Ext.tree.TreeNode(attrs);
this.feeds.appendChild(node);
if(!inactive){
if(!preventAnim){
Ext.fly(node.ui.elNode).slideIn('l', {
callback: node.select, scope: node, duration: .4
});
}else{
node.select();
}
}
return node;
},

// prevent the default context menu when you miss the node
afterRender : function(){
FeedPanel.superclass.afterRender.call(this);
this.el.on('contextmenu', function(e){
e.preventDefault();
});
}
});

Any ideas?

FuryVII
23 Oct 2007, 5:25 AM
Can I get a second look? Still no solution, and I believe this is a "real" bug to a feature of ExtJS. (Or I could be inept)