Ext js怎么让Tabs的tab显示在左边右边或者下面,默认都是上面的。

2024-05-10 04:11

1. Ext js怎么让Tabs的tab显示在左边右边或者下面,默认都是上面的。

你好,下面可以通过配置完成。但在左右,需要ul li也就是元素写出框架,html和css配合才能完成。

Ext js怎么让Tabs的tab显示在左边右边或者下面,默认都是上面的。

2. extjs做的界面,左边是树,点击每个树结点,右边切换不同的tabPanel,看清楚,不是切换页面哦!是tabPanel

1、点击树的节点触发test。参数为节点的id
listeners: {
    itemclick: function(node,record) {
        test(record.data.id);
    }
}

2、test函数,在tabpanel中加入新面板。
var tp;   // 你的tabpanel
function test(v) {
    tp.add({
        xtype: "panel",
        html: "增加的面板",
    }).show();
}

3. ExtJS给tabPanel添加图标如何实现?

Ext.create('Ext.tab.Panel', {
    width: 300,
    height: 200,
    activeTab: 0,
    items: [
        {
            title: 'Tab 1',
            bodyPadding: 10,
            iconCls:'你的图片样式',
            html : 'A simple tab'
        },
        {
            title: 'Tab 2',
             iconCls:'你的图片样式',
            html : 'Another one'
        }
    ],
    renderTo : Ext.getBody()
});

ExtJS给tabPanel添加图标如何实现?

4. ExtJS:点击左边tree菜单,右边显示数据

Ext.onReady(function() {    //只给leaf为true的节点加data,否则会与父节点展开事件发生冲突    var store = Ext.create("Ext.data.TreeStore", {        root:{            expanded:true,            children:[ {                text:"detention",                data:"html1.html",                leaf:true            }, {                text:"homework",                expanded:true,                children:[ {                    text:"book report",                    data:"html2.html",                    leaf:true                }, {                    text:"alegrbra",                    data:"html3.html",                    leaf:true                } ]            }, {                text:"buy lottery tickets",                data:"html4.html",                leaf:true            } ]        }    });    Ext.create("Ext.tree.Panel", {        store:store,        rootVisible:false,        listeners:{            itemclick:function(v, r) {                if (r.raw.data) {                    //获取节点的data的值                    alert(r.raw.data);                }            }        },        renderTo:Ext.getBody()    });});
在后面的面板中加一个panel,设置其html为

再修改刚才的itemclick事件
document.getElementById('target').src = r.raw.data;

5. 怎样在Ext JS的tabPanel中嵌入Grid,求实例!谢谢,顺便说下,不懂的就请绕行,别废话!

从我的代码中摘出来的,没验证,你再调调。
TabPanel和Grid的定义就不贴了,只说怎么嵌入。

var tabpanel = Ext.getCmp("CenterTabPanel");
if (!tabpanel.getActiveTab()) {
  var comp = Ext.getCmp("Gridid");
  var firstTab = createTabPage(rootId, comp, "Sale");
  tabpanel.add(firstTab);
  tabpanel.setActiveTab(firstTab.id);
}

createTabPage = function (id, comp, icon) {
  var tab = {
    id: id,
    iconCls: icon,
    title: "xxxxx",
    layout: 'fit',
    layoutOnTabChange: true,
    items: comp
  };
  return tab;
}

怎样在Ext JS的tabPanel中嵌入Grid,求实例!谢谢,顺便说下,不懂的就请绕行,别废话!

6. ext的TabPanel中tab过多,怎么实现下面这种方式?

如果答案满意,定加分! tabPanel是选项卡功能实现用到的 ,tablepanel没看到过 container>form>fieldset>anchor

7. Js 实现点击左侧a标签当点击每一个a,右面切换不一样的Div切换成另一个div

				*{margin: 0;padding: 0;}		#container{			height: 180px;			width: 240px;			margin: 200px auto;		}		#btn{			float: left;			width: 60px;			height: 180px;		}		#tab{			float: right;			width: 178px;			height: 178px;			margin-left: -180px;			border: 1px solid black;			position: relative;		}		.tab_btn{			display: block;			width: 58px;			height: 58px;			background: green;			line-height: 60px;			text-align: center;			border: 1px solid red;			text-decoration: none;			color: black;		}		.tab_btn:hover{			background: blue;			color: white;		}		.tab_div{			position: absolute;			left: 0px;			top: 0px;			display: none;		}		.curr_btn{			background: blue !important;			color: white;		}		.curr_div{			display: block !important;		}			  function getClass(className) { //className指class的值                      var tagname = document.getElementsByTagName('*');  //获取指定元素                var tagnameAll = [];     //这个数组用于存储所有符合条件的元素                for (var i = 0; i =0){     //如果获得的元素中的class的值等于指定的类名,就赋值给tagnameAll                        tagnameAll[tagnameAll.length] = tagname[i];                    }                }                return tagnameAll;                    }		window.onload=function(){//载入事件			var btn=getClass('tab_btn');//获取按钮数组			var div=getClass('tab_div');//获取div数组			for(i=0;i=0) return;//如果按下的按钮为当前选中的按钮则无反应					for(i=0;i						1			2			3											div1										div2										div3						
效果如上

Js 实现点击左侧a标签当点击每一个a,右面切换不一样的Div切换成另一个div

8. extjs中如何令Ext.tab.Panel像div一样,定位浮动在页面

思路是这样:弹窗用window。window里面放登陆的表单。你说的Ext.tab.Panel是可切换标签页的panel。这里可以不用。
弹出window 几定位的部分代码可以参考

var p = new Ext.form.FormPanel({
             ......// 里面放登陆表单元素

});
var w = new Ext.Window({
        items:[p],  

        ......// 其他你需要的元素。
});

a.show(); // 弹出窗口
a.setPosition( Number left, Number top )  // 设置位置的方法,一般来说window会默认弹出在页面的中间。
最新文章
热门文章
推荐阅读