var Banner = new Ext.Panel({
region: 'north',
title: '用户管理系统',
collapsible: true,
html: '<embed src="${path}/resource/flash/welcome.swf" width="100%" height="100%" play="true” loop="true" quality="high">',
split: true,
height: 150,
minHeight: 100,
contentEl : 'north',
});
//左边功能树
var MenuTree = new Ext.tree.TreePanel({
region: 'west',
contentEl : 'west',
collapsible: true,
title: '选择功能',
xtype: 'treepanel',
width: 200,
autoScroll: true,
animate : true,// 动画效果
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
text:'主功能',
expanded: false,
children: [{
text: '用户管理',
leaf: true,
listeners :{
'click':function(node, event){
event.stopEvent();
var n = MainPanel.getComponent(node.id);
if (!n) {
var p = new gridPanel();
p.id = node.id;
p.title = node.text;
n = MainPanel.add(p);
}
MainPanel.setActiveTab(n);
store/load();//加上这句就ok了.怎么刷新打开的formpanel?
}
}
}, {
text: '三',
leaf: true,
listeners :{
'click':function(node, event){
event.stopEvent();
var n = MainPanel.getComponent(node.id);
if (!n) {
var p = new fnPanel();
p.id = node.id;
p.title = node.text;
n = MainPanel.add(p);
}
MainPanel.setActiveTab(n);
},
activate:function(){
this.getUpdater().refresh();
}
}
}]
}),
rootVisible: true
});
//右边布局
var MainPanel = new Ext.TabPanel({
//id : 'home',
region: 'center',
contentEl : 'center',
autoDestroy : false,
activeTab: 0,
listeners : {
remove : function(tp,c){c.hide();}
},
items:[{
id:'homePage',
title:'首页',
autoScroll:true
//,html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="login.jsp"></iframe></div>'
}]
});
var FooterPanel=new Ext.Panel({
region: 'south',
contentEl : 'south',
html: '<h1 class="x-panel-header">copyright2012</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
});
//创建总框架页面
new Ext.Viewport({
layout: 'border',
items: [Banner,MenuTree, MainPanel,FooterPanel]
});
//通过扩展来构建要创建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit',
//autoLoad:{url:url,scripts:true},
//创建面板内容
createFormPanel:function() {
return new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
frame:false,
bodyBorder:false,
bodyStyle:'padding:25px',
items:[{
xtype:'textfield',
fieldLabel:'用户名',
width:350,
name:'username'
},{
xtype:'textfield',
fieldLabel:'密 码',
width:350,
name:'password'
}],
buttons:[{text:'登陆'}, {text:'取消'}]
});
},
initComponent:function() {
fnPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});
gridPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,
layout:'fit',
//创建面板内容
createFormPanel:function() {
return grid;
},
//重装控件初始化函数,在该函数中完成面板中内容的初始化
initComponent:function() {
gridPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}});
下边的gridpanel和store我就不贴了.
分享到:
相关推荐
**2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...
8. **`treepanel`:** 树型面板组件,用于展示层次结构的数据,通过`Ext.tree.TreePanel`类实现。 9. **`flash`:** Flash组件,用于在页面中嵌入Flash内容,自3.0版本开始支持,通过`Ext.FlashComponent`类实现。 ...
**Ext.tree.TreePanel** - **描述**: 树型面板,用于展示层次结构的数据。 - **用途**: 文件系统、目录结构的可视化表示。 **Ext.FlashComponent** - **描述**: 用于显示Flash内容的组件(尽管现在已很少使用)。 -...
- **`treepanel` (Ext.tree.TreePanel)**: 树型面板组件,用于展示层次结构的数据。 - **`flash` (Ext.FlashComponent)**: 自3.0版本开始支持,用于嵌入Flash内容。 - **`grid` (Ext.grid.GridPanel)**: 表格组件,...
16. `tabpanel` - `Ext.TabPanel`:选项卡面板,用于组织内容到不同的选项卡中。 17. `treepanel` - `Ext.tree.TreePanel`:树形面板,展示层次结构的数据。 18. `viewport` - `Ext.ViewPort`:视口组件,用于填充...
10. **`grid`** - `Ext.grid.GridPanel`,表格组件,用于展示数据列表。 11. **`editorgrid`** - `Ext.grid.EditorGridPanel`,可编辑的表格组件,允许用户直接在表格中编辑数据。 12. **`propertygrid`** - `...
- **数据存储(Store)**:用于管理和存储表格中的数据,支持多种数据源格式。 - **树控件(Tree Panel)**:用于展示层次结构的数据,如文件系统。 通过以上详细介绍,我们可以看到ExtJS提供了非常丰富的UI组件...
- `tabpanel`: `Ext.TabPanel` - `treepanel`: `Ext.tree.TreePanel` - `viewport`: `Ext.ViewPort` - `window`: `Ext.Window` - `toolbarcomponents`: `paging`, `toolbar`, `tbbutton`, `tbfill`, `tbitem`, `...
- **Loadpanel方法**: 加载面板的方法,可以在加载数据或其他组件时显示一个加载指示器。 #### GridPanel 相关操作 - **GridPanel**: 表格组件,用于展示数据记录的表格形式。 - **CreateColumns**: 创建列,定义...
- **`Class`**: `Ext.grid.GridPanel` - **描述**: 表格组件,用于展示数据。 11. **`editorgrid`:** - **`xtype`**: `editorgrid` - **`Class`**: `Ext.grid.EditorGridPanel` - **描述**: 可编辑的表格组件...
- `viewport`: `Ext.ViewPort` - `window`: `Ext.Window` - **Toolbar components**: - `paging`: `Ext.PagingToolbar` - `toolbar`: `Ext.Toolbar` - `tbbutton`: `Ext.Toolbar.Button` (已废弃,使用 `...