- 浏览: 537 次
- 性别:
- 来自: 上海
文章分类
最新评论
extjs tab选显卡嵌套怎么玩啊,求大神执教啊
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.TabPanel({
id:'main-tabs',
activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
enableTabScroll:true,
//headerCfg:{style:'display:none'},//隐藏表单头部
tabWidth:600,
height:parent.height,
style:'text-align:center;',
items:[{ title: '<div align="center">水泥客户区域维护</div>',
listeners:{ // 添加监听器,点击此页面的tab时候要重新加载(刷新功能)
activate:function(){
this.getUpdater().refresh();
}
},
items:[{
layout:'column',
items:[
new Ext.FormPanel({
labelWidth: 80,
labelAlign: 'right',
frame: false,
id:'custioms',
region:'north',
title: '',
height:parent.height,
//width:600,
items: [{
xtype:'tbtext',
text : '查询条件',
style:'color:#009DD9;',
width:240
},{
layout:'column',
border:false,
bodyStyle:'padding:15px 0 0 40px;',
items:[{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '所属单位',
name: 'company',
emptyText: '所属单位',
width:240,
style:'margin-left:-375px;'
}, {
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-295px;'
}, {
xtype:'textfield',
fieldLabel: '客商名称',
name: 'company',
emptyText: '客商名称',
width:240,
style:'margin-left:-295px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel : '负责人',
name : 'id',
emptyText: '负责人',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '业务人员',
name: 'company',
emptyText: '业务人员',
width:240,
style:'margin-left:-295px;'
}]
}]
}],
buttonAlign:'center',
//bodyPadding :'0 0 0 30',
buttons: [
{
text: '查询',
handler: function(){
search_btn();
}
},{
text: '重置',
handler: function(){
Ext.getCmp("custioms").form.reset();
}
}]
}),new Ext.grid.GridPanel({
//region:'center',
id:'topic-grid',
store: ds,
cm: cm,
sm:sm,//指向定义好的单选按钮
trackMouseOver:false,
region:'north',
loadMask: {msg:'Loading Topics...'},
// 定制用户界面
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true
},
// 添加内陷的按钮 Businessline
tbar : [
{
id : 'addUserForm',
text : ' 新建 ',
tooltip : '新建一个表单',
iconCls : 'add',
handler : function() {
add_btn();
}
}, '-', {
id : 'editUserForm',
text : '修改',
tooltip : '修改',
iconCls : 'edit',
handler : function() {
edit_btn();
}
},'-', {
text : '删除',
tooltip : '删除被选择的内容',
iconCls : 'remove',
handler : function() {
handleDelete();
}
}
],
// 在底部的分页工具栏
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到{1}条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
})
]
}]
},
{ title: '<div align="center">孰料客商区域维护</div>',
listeners:{ // 添加监听器,点击此页面的tab时候要重新加载(刷新功能)
activate:function(){
this.getUpdater().refresh();
}
},
items: [
{ layout: 'column',
//bodyStyle: "padding:5px 5px 5px 10px",
border: false,
items: [{
items:[
new Ext.FormPanel({
labelWidth: 80,
labelAlign: 'right',
frame: false,
id:'custioms',
region:'north',
title: '',
bodyStyle:'padding:20px 0px 0 40px;',
height:250,
//width:600,
items: [{
xtype:'tbtext',
text : '查询条件',
style:'color:#009DD9;',
width:240
},{
layout:'column',
border:false,
bodyStyle:'padding:15px 0 0 40px;',
items:[{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '所属单位',
name: 'company',
emptyText: '所属单位',
width:240,
style:'margin-left:-375px;'
}, {
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-295px;'
}, {
xtype:'textfield',
fieldLabel: '客商名称',
name: 'company',
emptyText: '客商名称',
width:240,
style:'margin-left:-295px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel : '负责人',
name : 'id',
emptyText: '负责人',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '业务人员',
name: 'company',
emptyText: '业务人员',
width:240,
style:'margin-left:-295px;'
}]
}]
}],
buttonAlign:'center',
//bodyPadding :'0 0 0 30',
buttons: [
{
text: '查询',
handler: function(){
search_btn();
}
},{
text: '重置',
handler: function(){
Ext.getCmp("custioms").form.reset();
}
}]
}),
new Ext.grid.GridPanel({
//region:'center',
id:'topic-grid',
store: ds,
cm: cm,
sm:sm,//指向定义好的单选按钮
trackMouseOver:false,
region:'center',
loadMask: {msg:'Loading Topics...'},
// 定制用户界面
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true
},
// 添加内陷的按钮 Businessline
tbar : [
{
id : 'addUserForm',
text : ' 新建 ',
tooltip : '新建一个表单',
iconCls : 'add',
handler : function() {
add_btn();
}
}, '-', {
id : 'editUserForm',
text : '修改',
tooltip : '修改',
iconCls : 'edit',
handler : function() {
edit_btn();
}
},'-', {
text : '删除',
tooltip : '删除被选择的内容',
iconCls : 'remove',
handler : function() {
handleDelete();
}
}, '-', {
text : '浏览',
tooltip : '浏览被选择的内容',
iconCls : 'browse',
handler : function() {
brow_btn();
}
}
],
// 在底部的分页工具栏
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到{1}条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
})
]
}]
}
]
}] //
})
]
});
layout:'border',
items:[
new Ext.TabPanel({
id:'main-tabs',
activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
enableTabScroll:true,
//headerCfg:{style:'display:none'},//隐藏表单头部
tabWidth:600,
height:parent.height,
style:'text-align:center;',
items:[{ title: '<div align="center">水泥客户区域维护</div>',
listeners:{ // 添加监听器,点击此页面的tab时候要重新加载(刷新功能)
activate:function(){
this.getUpdater().refresh();
}
},
items:[{
layout:'column',
items:[
new Ext.FormPanel({
labelWidth: 80,
labelAlign: 'right',
frame: false,
id:'custioms',
region:'north',
title: '',
height:parent.height,
//width:600,
items: [{
xtype:'tbtext',
text : '查询条件',
style:'color:#009DD9;',
width:240
},{
layout:'column',
border:false,
bodyStyle:'padding:15px 0 0 40px;',
items:[{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '所属单位',
name: 'company',
emptyText: '所属单位',
width:240,
style:'margin-left:-375px;'
}, {
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-295px;'
}, {
xtype:'textfield',
fieldLabel: '客商名称',
name: 'company',
emptyText: '客商名称',
width:240,
style:'margin-left:-295px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel : '负责人',
name : 'id',
emptyText: '负责人',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '业务人员',
name: 'company',
emptyText: '业务人员',
width:240,
style:'margin-left:-295px;'
}]
}]
}],
buttonAlign:'center',
//bodyPadding :'0 0 0 30',
buttons: [
{
text: '查询',
handler: function(){
search_btn();
}
},{
text: '重置',
handler: function(){
Ext.getCmp("custioms").form.reset();
}
}]
}),new Ext.grid.GridPanel({
//region:'center',
id:'topic-grid',
store: ds,
cm: cm,
sm:sm,//指向定义好的单选按钮
trackMouseOver:false,
region:'north',
loadMask: {msg:'Loading Topics...'},
// 定制用户界面
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true
},
// 添加内陷的按钮 Businessline
tbar : [
{
id : 'addUserForm',
text : ' 新建 ',
tooltip : '新建一个表单',
iconCls : 'add',
handler : function() {
add_btn();
}
}, '-', {
id : 'editUserForm',
text : '修改',
tooltip : '修改',
iconCls : 'edit',
handler : function() {
edit_btn();
}
},'-', {
text : '删除',
tooltip : '删除被选择的内容',
iconCls : 'remove',
handler : function() {
handleDelete();
}
}
],
// 在底部的分页工具栏
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到{1}条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
})
]
}]
},
{ title: '<div align="center">孰料客商区域维护</div>',
listeners:{ // 添加监听器,点击此页面的tab时候要重新加载(刷新功能)
activate:function(){
this.getUpdater().refresh();
}
},
items: [
{ layout: 'column',
//bodyStyle: "padding:5px 5px 5px 10px",
border: false,
items: [{
items:[
new Ext.FormPanel({
labelWidth: 80,
labelAlign: 'right',
frame: false,
id:'custioms',
region:'north',
title: '',
bodyStyle:'padding:20px 0px 0 40px;',
height:250,
//width:600,
items: [{
xtype:'tbtext',
text : '查询条件',
style:'color:#009DD9;',
width:240
},{
layout:'column',
border:false,
bodyStyle:'padding:15px 0 0 40px;',
items:[{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '所属单位',
name: 'company',
emptyText: '所属单位',
width:240,
style:'margin-left:-375px;'
}, {
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '一级区域',
name: 'company',
emptyText: '一级区域',
width:240,
style:'margin-left:-295px;'
}, {
xtype:'textfield',
fieldLabel: '客商名称',
name: 'company',
emptyText: '客商名称',
width:240,
style:'margin-left:-295px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel : '负责人',
name : 'id',
emptyText: '负责人',
width:240,
style:'margin-left:-375px;'
}]
},{
columnWidth:.5,
border:false,
layout: 'form',
bodyStyle:'padding-left:80px;',
items: [{
xtype:'textfield',
fieldLabel: '业务人员',
name: 'company',
emptyText: '业务人员',
width:240,
style:'margin-left:-295px;'
}]
}]
}],
buttonAlign:'center',
//bodyPadding :'0 0 0 30',
buttons: [
{
text: '查询',
handler: function(){
search_btn();
}
},{
text: '重置',
handler: function(){
Ext.getCmp("custioms").form.reset();
}
}]
}),
new Ext.grid.GridPanel({
//region:'center',
id:'topic-grid',
store: ds,
cm: cm,
sm:sm,//指向定义好的单选按钮
trackMouseOver:false,
region:'center',
loadMask: {msg:'Loading Topics...'},
// 定制用户界面
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true
},
// 添加内陷的按钮 Businessline
tbar : [
{
id : 'addUserForm',
text : ' 新建 ',
tooltip : '新建一个表单',
iconCls : 'add',
handler : function() {
add_btn();
}
}, '-', {
id : 'editUserForm',
text : '修改',
tooltip : '修改',
iconCls : 'edit',
handler : function() {
edit_btn();
}
},'-', {
text : '删除',
tooltip : '删除被选择的内容',
iconCls : 'remove',
handler : function() {
handleDelete();
}
}, '-', {
text : '浏览',
tooltip : '浏览被选择的内容',
iconCls : 'browse',
handler : function() {
brow_btn();
}
}
],
// 在底部的分页工具栏
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到{1}条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
})
]
}]
}
]
}] //
})
]
});
相关推荐
ExtJS Tab Panel是Ext JS库中的一个核心组件,它用于创建具有多个标签页的应用界面,类似于浏览器中的标签页。在Web应用中,Tab Panel经常被用来组织和展示大量的信息,让用户能够在一个页面上轻松切换不同的内容...
在这个“Extjs4 tab 基本选项卡及增删插入操作”的主题中,我们将深入探讨如何使用ExtJS 4来管理TabPanel的选项卡,包括创建、删除和插入操作。 首先,让我们了解TabPanel的基本配置和选项: 1. **创建TabPanel** ...
extjs点击右侧面板生成tab,面板是ul+li的
在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...
- `extjs复选框树.js`:这是实现上述功能的JavaScript代码,包括工具类和针对树节点的操作方法。 - `样式文件.css`:可能包含了一些自定义的样式,用于美化复选框和树的显示效果。 - `示例HTML文件.html`:演示如何...
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
在EXTJS这个强大的JavaScript框架中,用户界面的交互设计是其一大亮点,其中包括各种各样的控件,如复选框(checkboxes)和全选功能。然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消...
ExtJs的页面布局、界面设计的源码 直接运行index.html可看效果,源码在里面
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
在ExtJS中,TabPanel是一种常用的组件,它用于创建具有多个选项卡的用户界面,每个选项卡可以包含不同的内容。当需要将一个TabPanel嵌入到其他网页中时,这通常涉及到跨页面交互或者说是子页面的嵌入。在本文中,...
在ExtJS4中实现表格的嵌套使用rowExpander插件是一项非常实用的技术,它允许我们为表格中的每一行添加一个可展开的详细信息区域。该功能通过一个简单的“+”号来标识,用户点击即可展示子表格,子表格数据可动态从...
其中, `.x-tab-active` 是Extjs中当前活动页签的CSS类名, `.x-tab-wrap` 是标签页签的容器, `.x-tab-button` 是标签页签的按钮, `.x-tab-inner` 是标签页签的内部容器。 在上面的代码中,我们使用了CSS选择器来...
在这个"extjs4.1下拉复选框完整DEMO"中,我们主要关注的是如何使用ExtJS实现一个具有动态加载功能的下拉复选框组件。这个DEMO包含以下几个关键组成部分: 1. **ext-all-debug.js**:这是ExtJS的核心库文件,包含了...
本文将深入探讨如何在ExtJS中实现复选下拉框(Multiselect ComboBox),并提供一个具体示例,帮助开发者更好地理解和应用这一功能。 ### ExtJS复选下拉框的实现 复选下拉框在用户界面设计中非常有用,它允许用户从...
基于EXTjs 的 动态复选框树 json数据交互
在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....
extjs 复选下拉框的例子
在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...