- 浏览: 508 次
- 性别:
- 来自: 上海
文章分类
最新评论
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: "没有记录"
})
})
]
}]
}
]
}] //
})
]
});
相关推荐
Extjs4 tab 基本选项卡及增删插入操作
extjs点击右侧面板生成tab,面板是ul+li的
NULL 博文链接:https://zhonghuart.iteye.com/blog/1663377
extjs 复选下拉框的例子extjs 复选下拉框的例子
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
ExtJs的页面布局、界面设计的源码 直接运行index.html可看效果,源码在里面
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
基于EXTjs 的 动态复选框树 json数据交互
extjs 复选下拉框的例子
EXTJS 选下拉框,并取得下拉框的值,直接可以打开
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
Extjs中TabPane在一些特殊用途时把其嵌在其他的网页中,很多新手朋友可能对此不是很熟悉,小编就在本文章中详细的介绍一下,感兴趣的你可不要错过了啊,希望本文对你有所帮助
今天做一个grid,里面的数据需要带明细,思来想去还是搞个表格嵌套吧,需要的朋友可以参考下
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
一个关于TABS组件的EXT实例,帮助大家学习TAB控件和JS语言。。。