bassman5
15 Jul 2007, 3:30 AM
Hi,
ext-1.1-rc1
ext-base.js
Windows XP SP2
IE 7.0.5730.11 and 6.0.3790.1830
FireFox 2.0.0.4 with FireBug 1.05
Here are a few problems I have been have with 1.1 rc1, I have included a complete example that can be placed as an html file in the example dir, it uses no ajax calls or server, everything is read from arrays, and the html (which originally was generated) is now static. All excess formatting has been removed so it does not look perfectly formatted, but this does include the elements that display the problem. It seems as the layout gets more complex, this starts to show up, but I have tried to reduce the complexity but still demonstrate the issues. I have cut and pasted various demos and examples from lots of people to produce the kind of layout I would like to achieve, I am open to doing this in other ways that achieve a similar result.
I have used Forms with tabs, I have seen a few people ask about this, and things went wrong when I added the tabs, however if you have many options it becomes impossible to fit them in a single panel.
1 Scrolling with IE 6 and 7
The west panel is a ContentPanel containing 2 TreePanels with AsyncTreeNodes.
If the trees are expanded, scroll bars for the west panel do not appear, either vertical or horizontal, although a mouse scroll wheel will move the panel vertically.
This is also displayed in the center panel of Tab 1 where there are multiple grids, again scroll bars don't appear, but the mouse wheel will scroll vertically if the browser window is narrow.
I went through a number of posts about this and tried the various combinations of options but could not get it to work.
This seems to be only when the content is loaded via ajax if I use static html in the panels scroll bars appear correctly.
2 Scroll Bar calculation in FireFox 2
Loading the same page in FireFox 2 does show the scroll bars in both the West pane and Tab 1, however the calculation of the scroll bar sizes looks like it does not take into account the other scroll bar. So the vertical scroll bar always shows a small amount of travel available even when there is no more content out of view. Same for the horz scroll bar.
3 Forms with Tabs containing a Ext.form.HtmlEditor in FireFox 2.0
On Tab 2
If the HtmlEditor is included in the form FireFox generates continuous errors in FireBug
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.designMode]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/yui/ext-all-debug.js :: anonymous :: line 23121" data: no]
and the HtmlEditor text contains 'false' and cannot be used (the toolbar is greyed out).
Works in IE, if you comment out the HtmlEditor, FireFox is happy.
4 Scrolling and Content size in Forms with Tabs in FireFox 2.0
On Tab 2, the form tab always extends vertically off the screen, although the scroll bars will allow you to get to the content off the screen. Resize the browser and the same blank area is included in the form.
That is it, sorry for the long post.
Here is the html file.
<html>
<head>
<title>Ext Example</title>
<link href="../resources/css/ext-all.css" media="screen" rel="Stylesheet" type="text/css" />
<script src="../adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../ext-all-debug.js" type="text/javascript"></script>
<script src="form/states.js" type="text/javascript"></script>
<script src="examples.js" type="text/javascript"></script>
<script>
var ExtTest = window.ExtTest || {};
ExtTest.Viewer = function(){
// a bunch of private variables accessible by member function
var layout, statusPanel, homePanel;
return {
init : function(){
try {
Ext.BLANK_IMAGE_URL = '../resources/images/aero/s.gif';
}
catch (e) {}
Ext.QuickTips.init();
// initialize state manager, we will use cookies
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// create the main layout
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
titlebar: false,
cmargins: {top:0,bottom:0,right:0,left:0}
},
west: {
split:true,
initialSize: 140,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:true
},
south: {
split:false,
initialSize: 22,
titlebar: false,
collapsible: false,
animate: false
},
center: {
titlebar: false,
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true,
resizeTabs: true
}
});
// tell the layout not to perform layouts until we're done adding everything
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header'));
// initialize the statusbar
statusPanel = new Ext.ContentPanel('status');
layout.getRegion('south').add(statusPanel);
layout.add('west', new Ext.ContentPanel('tree-panel',
{title: 'My Content', autoscroll: true, fitToFrame:true,
closable:false
}));
var tab1 = new Ext.ContentPanel('tab1',
{title: 'Tab 1', fitToFrame:true, closable:false});
homePanel = layout.add('center', tab1);
layout.add('center', new Ext.ContentPanel('tab2',
{title: 'Tab 2', fitToFrame:true, closable:false}));
var resultsDiv = Ext.DomHelper.append(document.body,
{id: 'tab3', frameBorder: 0});
layout.add('center', new Ext.ContentPanel(resultsDiv, {title: 'Tab 3', fitToFrame:true}));
this.setupTrees();
this.setupContent();
this.setupDialogBox();
this.selectTab('tab1');
// restore any state information
layout.restoreState();
layout.endUpdate();
},
setupContent : function ()
{
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var cm = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'}
]);
// create the Grids
fmons = Ext.query('#tab1 .tab_grid');
for (var i = 0; i < fmons.length; i++)
{
var grid = new Ext.grid.Grid(fmons[i].id, {
ds: ds,
cm: cm
});
grid.render();
ds.load();
}
},
setupTrees : function()
{
var Tree = Ext.tree;
var tree1 = new Tree.TreePanel('tree1', {
loader: new Tree.TreeLoader(),
animate:true,
enableDD:true,
containerScroll: false
});
// set the root node
var tree1root = new Tree.AsyncTreeNode({
text: 'Tree 1',
draggable:false,
children: [
{text: 'Pink Floyd', id:'rock-1', children: [
{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
]},
{text: 'Rolling Stones', id:'rock-2', children: [
{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
]},
{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true}
]
});
tree1.setRootNode(tree1root);
// render the tree
tree1.render();
tree1root.expand();
var tree2 = new Tree.TreePanel('tree2', {
loader: new Tree.TreeLoader(),
animate:true,
enableDD:true,
containerScroll: false
});
// set the root node
var tree2root = new Tree.AsyncTreeNode({
text: 'Tree 2',
draggable:false,
children: [
{text: 'Pink Floyd', id:'rock-1', children: [
{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
]},
{text: 'Rolling Stones', id:'rock-2', children: [
{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
]},
{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true}
]
});
tree2.setRootNode(tree2root);
// render the tree
tree2.render();
tree2root.expand();
},
selectTab : function(el){
var tabs = layout.getRegion('center').getTabs();
var tab = tabs.getTab(el);
if (tab)
tabs.activate(el);
},
setupDialogBox : function(){
var top = new Ext.form.Form({labelWidth: 75 });
top.end();
// container for tabs
var frmContainerTabs = top.container();
top.end();
// tabs
var frmTabs = new Array();
frmTabs[0] = top.container(
{el:Ext.DomHelper.append(Ext.get('dialog_box'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 't1_first',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 't1_last',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 't1_company',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 't1_email',
vtype:'email',
width:225
}),
new Ext.form.HtmlEditor({
id:'t1_bio',
fieldLabel:'Content',
width:550,
height:200
})
);
frmTabs[1] = top.container(
{el:Ext.DomHelper.append(Ext.get('dialog_box'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 't2_first',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 't2_last',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 't2_company',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 't2_email',
vtype:'email',
width:190
}),
new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'state',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
}),
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:190
}),
new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 't2_dob',
width:190,
allowBlank:false
}),
new Ext.form.Checkbox({
fieldLabel:'Option 1',
hideLabels:true,
name:'t2_opt1'
}),
new Ext.form.Checkbox({
fieldLabel:'Option 2',
name:'t2_opt2'
})
);
/* top.addButton('Save'); */
top.addButton({text: 'Save', handler: function () { alert(top.getValues(true)) } });
top.addButton('Cancel');
top.render('dialog_box');
var tabPanel=new Ext.TabPanel(frmContainerTabs.el);
tabPanel.addTab(frmTabs[0].getEl().id,'Form Tab 1');
tabPanel.addTab(frmTabs[1].getEl().id,'Form Tab 2');
tabPanel.activate(0);
}
};
}();
Ext.onReady(ExtTest.Viewer.init, ExtTest.Viewer);
</script>
</head>
<body id="ext-demo">
<div id="header">
<div id="logo"></div>
<div id="product_info"></div>
</div>
<div id="tree-panel">
<div id="tree1">
</div>
<div id="tree2">
</div>
</div>
<div id="tab1">
<div class="tab_grid" style="margin:20px;display:block;float:left;width:310;" id="grid_1"></div>
<div class="tab_grid" style="margin:20px;display:block;float:left;width:310;" id="grid_2"></div>
<div class="tab_grid" style="margin:20px;display:block;float:left;width:310;" id="grid_3"></div>
</div>
</div>
<div id="tab2">
<div style="width:740px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="dialog_box">
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>
<div id="status" class="x-layout-inactive-content">
</body>
</html>
ext-1.1-rc1
ext-base.js
Windows XP SP2
IE 7.0.5730.11 and 6.0.3790.1830
FireFox 2.0.0.4 with FireBug 1.05
Here are a few problems I have been have with 1.1 rc1, I have included a complete example that can be placed as an html file in the example dir, it uses no ajax calls or server, everything is read from arrays, and the html (which originally was generated) is now static. All excess formatting has been removed so it does not look perfectly formatted, but this does include the elements that display the problem. It seems as the layout gets more complex, this starts to show up, but I have tried to reduce the complexity but still demonstrate the issues. I have cut and pasted various demos and examples from lots of people to produce the kind of layout I would like to achieve, I am open to doing this in other ways that achieve a similar result.
I have used Forms with tabs, I have seen a few people ask about this, and things went wrong when I added the tabs, however if you have many options it becomes impossible to fit them in a single panel.
1 Scrolling with IE 6 and 7
The west panel is a ContentPanel containing 2 TreePanels with AsyncTreeNodes.
If the trees are expanded, scroll bars for the west panel do not appear, either vertical or horizontal, although a mouse scroll wheel will move the panel vertically.
This is also displayed in the center panel of Tab 1 where there are multiple grids, again scroll bars don't appear, but the mouse wheel will scroll vertically if the browser window is narrow.
I went through a number of posts about this and tried the various combinations of options but could not get it to work.
This seems to be only when the content is loaded via ajax if I use static html in the panels scroll bars appear correctly.
2 Scroll Bar calculation in FireFox 2
Loading the same page in FireFox 2 does show the scroll bars in both the West pane and Tab 1, however the calculation of the scroll bar sizes looks like it does not take into account the other scroll bar. So the vertical scroll bar always shows a small amount of travel available even when there is no more content out of view. Same for the horz scroll bar.
3 Forms with Tabs containing a Ext.form.HtmlEditor in FireFox 2.0
On Tab 2
If the HtmlEditor is included in the form FireFox generates continuous errors in FireBug
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLDocument.designMode]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/yui/ext-all-debug.js :: anonymous :: line 23121" data: no]
and the HtmlEditor text contains 'false' and cannot be used (the toolbar is greyed out).
Works in IE, if you comment out the HtmlEditor, FireFox is happy.
4 Scrolling and Content size in Forms with Tabs in FireFox 2.0
On Tab 2, the form tab always extends vertically off the screen, although the scroll bars will allow you to get to the content off the screen. Resize the browser and the same blank area is included in the form.
That is it, sorry for the long post.
Here is the html file.
<html>
<head>
<title>Ext Example</title>
<link href="../resources/css/ext-all.css" media="screen" rel="Stylesheet" type="text/css" />
<script src="../adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../ext-all-debug.js" type="text/javascript"></script>
<script src="form/states.js" type="text/javascript"></script>
<script src="examples.js" type="text/javascript"></script>
<script>
var ExtTest = window.ExtTest || {};
ExtTest.Viewer = function(){
// a bunch of private variables accessible by member function
var layout, statusPanel, homePanel;
return {
init : function(){
try {
Ext.BLANK_IMAGE_URL = '../resources/images/aero/s.gif';
}
catch (e) {}
Ext.QuickTips.init();
// initialize state manager, we will use cookies
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// create the main layout
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
titlebar: false,
cmargins: {top:0,bottom:0,right:0,left:0}
},
west: {
split:true,
initialSize: 140,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:true
},
south: {
split:false,
initialSize: 22,
titlebar: false,
collapsible: false,
animate: false
},
center: {
titlebar: false,
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true,
resizeTabs: true
}
});
// tell the layout not to perform layouts until we're done adding everything
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header'));
// initialize the statusbar
statusPanel = new Ext.ContentPanel('status');
layout.getRegion('south').add(statusPanel);
layout.add('west', new Ext.ContentPanel('tree-panel',
{title: 'My Content', autoscroll: true, fitToFrame:true,
closable:false
}));
var tab1 = new Ext.ContentPanel('tab1',
{title: 'Tab 1', fitToFrame:true, closable:false});
homePanel = layout.add('center', tab1);
layout.add('center', new Ext.ContentPanel('tab2',
{title: 'Tab 2', fitToFrame:true, closable:false}));
var resultsDiv = Ext.DomHelper.append(document.body,
{id: 'tab3', frameBorder: 0});
layout.add('center', new Ext.ContentPanel(resultsDiv, {title: 'Tab 3', fitToFrame:true}));
this.setupTrees();
this.setupContent();
this.setupDialogBox();
this.selectTab('tab1');
// restore any state information
layout.restoreState();
layout.endUpdate();
},
setupContent : function ()
{
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var cm = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'}
]);
// create the Grids
fmons = Ext.query('#tab1 .tab_grid');
for (var i = 0; i < fmons.length; i++)
{
var grid = new Ext.grid.Grid(fmons[i].id, {
ds: ds,
cm: cm
});
grid.render();
ds.load();
}
},
setupTrees : function()
{
var Tree = Ext.tree;
var tree1 = new Tree.TreePanel('tree1', {
loader: new Tree.TreeLoader(),
animate:true,
enableDD:true,
containerScroll: false
});
// set the root node
var tree1root = new Tree.AsyncTreeNode({
text: 'Tree 1',
draggable:false,
children: [
{text: 'Pink Floyd', id:'rock-1', children: [
{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
]},
{text: 'Rolling Stones', id:'rock-2', children: [
{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
]},
{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true}
]
});
tree1.setRootNode(tree1root);
// render the tree
tree1.render();
tree1root.expand();
var tree2 = new Tree.TreePanel('tree2', {
loader: new Tree.TreeLoader(),
animate:true,
enableDD:true,
containerScroll: false
});
// set the root node
var tree2root = new Tree.AsyncTreeNode({
text: 'Tree 2',
draggable:false,
children: [
{text: 'Pink Floyd', id:'rock-1', children: [
{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
]},
{text: 'Rolling Stones', id:'rock-2', children: [
{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
]},
{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true}
]
});
tree2.setRootNode(tree2root);
// render the tree
tree2.render();
tree2root.expand();
},
selectTab : function(el){
var tabs = layout.getRegion('center').getTabs();
var tab = tabs.getTab(el);
if (tab)
tabs.activate(el);
},
setupDialogBox : function(){
var top = new Ext.form.Form({labelWidth: 75 });
top.end();
// container for tabs
var frmContainerTabs = top.container();
top.end();
// tabs
var frmTabs = new Array();
frmTabs[0] = top.container(
{el:Ext.DomHelper.append(Ext.get('dialog_box'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 't1_first',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 't1_last',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 't1_company',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 't1_email',
vtype:'email',
width:225
}),
new Ext.form.HtmlEditor({
id:'t1_bio',
fieldLabel:'Content',
width:550,
height:200
})
);
frmTabs[1] = top.container(
{el:Ext.DomHelper.append(Ext.get('dialog_box'), {tag:'div', style:'padding:20px'})},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 't2_first',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 't2_last',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 't2_company',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 't2_email',
vtype:'email',
width:190
}),
new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'state',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
}),
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:190
}),
new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 't2_dob',
width:190,
allowBlank:false
}),
new Ext.form.Checkbox({
fieldLabel:'Option 1',
hideLabels:true,
name:'t2_opt1'
}),
new Ext.form.Checkbox({
fieldLabel:'Option 2',
name:'t2_opt2'
})
);
/* top.addButton('Save'); */
top.addButton({text: 'Save', handler: function () { alert(top.getValues(true)) } });
top.addButton('Cancel');
top.render('dialog_box');
var tabPanel=new Ext.TabPanel(frmContainerTabs.el);
tabPanel.addTab(frmTabs[0].getEl().id,'Form Tab 1');
tabPanel.addTab(frmTabs[1].getEl().id,'Form Tab 2');
tabPanel.activate(0);
}
};
}();
Ext.onReady(ExtTest.Viewer.init, ExtTest.Viewer);
</script>
</head>
<body id="ext-demo">
<div id="header">
<div id="logo"></div>
<div id="product_info"></div>
</div>
<div id="tree-panel">
<div id="tree1">
</div>
<div id="tree2">
</div>
</div>
<div id="tab1">
<div class="tab_grid" style="margin:20px;display:block;float:left;width:310;" id="grid_1"></div>
<div class="tab_grid" style="margin:20px;display:block;float:left;width:310;" id="grid_2"></div>
<div class="tab_grid" style="margin:20px;display:block;float:left;width:310;" id="grid_3"></div>
</div>
</div>
<div id="tab2">
<div style="width:740px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="dialog_box">
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>
<div id="status" class="x-layout-inactive-content">
</body>
</html>