本文目录一览：
- 1、extjs怎么设置tabpanel详解
- 2、如何改变extjs中gridpanel单元格边框，上下边框
- 3、Extjs 中 Ext.grid.feature.Summary 可以将统计的行放在最上面么？
- 4、extjs labelalign有什么作用
- 5、extjs 中ComboBox 下拉框 如何调整上边距margin-top 使它往下一点
- 6、在extjs中,我怎么设置一个panel的位置,比如距上边缘有多少,距下边缘有多少,左边缘多少,右边缘多少？
extjs怎么设置tabpanel详解
Ext.onReady(function(){
var i = 4 ;
//注意:每个Tab标签只渲染一次
var tabs = new Ext.TabPanel({
renderTo: Ext.getBody(),//绑定在body标签上
activeTab: 0,//初始显示第几个Tab页
deferredRender: false,//是否在显示每个标签的时候再渲染标签中的内容.默认true
tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top.
enableTabScroll: true,//当Tab标签过多时,出现滚动条
items: [{//Tab的个数
title: 'Tab 1',
html: 'A simple tab',
listeners: {render:function(){//为每个Tab标签添加监听器.当标签渲染时触发
Ext.Msg.alert("Tab 1","渲染Tab 1成功") ;
}}
},{
title: 'Tab 2',
html: 'Another one',
listeners: {render: myRender}
},{
title: 'Tab 3',
autoLoad: 'test.html',
closable: true,
listeners: {render: myRender}
}],
bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮
text:'添加标签',
handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到).
var id = i ;
tabs.add({//添加一个Tab标签
id: id,
title:'Tab '+i,
closable: true
}) ;
i=i+1;
tabs.setActiveTab(id) ;//当id为"id"的Tab标签显示(变为活动标签).
}
},{
text:'删除标签',
handler: function(){
var t = tabs.getActiveTab();//获得当前活动标签的引用
if(t.closable){
tabs.remove(t);//删除标签
}else{
Ext.Msg.alert("提示","该标签不能关闭") ;
}
}
}]
});
//把TabPanel组件充满整个body容器.
new Ext.Viewport({
layout: 'fit',
items: tabs
});
});
如何改变extjs中gridpanel单元格边框，上下边框
看了一下Extjs中html代码会知道，extjs中gridpanel中的表格是通过divtabletbodytrtddivcontent式的结构书写的。要改变单元格边框的样式就要改变Ext-all.css中.x-grid3-row这个样式。这个样式是应用到最外层div上的。
全局改变只需改变Ext-all.css里面的.x-grid3-row样式
比如你想去掉边框可以这样：
一、.x-grid3-row{cursor:default;border:0px solid #fff;border-top-color:#fff;width:100%;}
如果想个性一点，自己要定义一个样式然后应用到特定的行如：
一、.my-x-grid3-row{cursor:default;border:0px solid #ccc,border-top-color:#fff;width:100%;}
二、应用样式，获取div
var view=grid.getView();
var rows=view.getRows();//获取所有的行
var row=rows[0];//获取单行，就是你想改变的那一行，rows[1],rows[2].....都可以，就看你有多少列了
var cls= Ext.get(row);//获取ext中外层div对象
cls.removeClass("x-grid3-row");//去掉原来的样式
cls.addClass("my-x-grid3-row");//加上自己的样式
这样你会发现原来的边框不见了。大家可以举一反三改变其他样式。
ps：extjs中css中核心的部分是Ext-all.css,所以大家要是想改变样式直接改变里面的东西就ok啦
Extjs 中 Ext.grid.feature.Summary 可以将统计的行放在最上面么？
你可以看下这个帖子,然后里面有 Summary.js的源码
GroupSummary.js
解决方案
renderSummary : function(o, cs, cm) {
cs = cs || this.view.getColumnData();
var cfg = cm.config,
buf = [],
last = cs.length - 1;
for (var i = 0, len = cs.length; i len; i++) {
var c = cs[i], cf = cfg[i], p = {};
p.id = c.id;
p.style = c.style;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
if (cf.summaryType || cf.summaryRenderer) {
p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
} else {
p.value = '';
}
//此处设置默认不显示时用什么符号标记
if (p.value == undefined || p.value === "") p.value = "-";
buf[buf.length] = this.cellTpl.apply(p); ///////////////////////////////此处
}
return this.rowTpl.apply({
tstyle: 'width:' + this.view.getTotalWidth() + ';',
cells: buf.join('')
});
},
buf[buf.length] = this.cellTpl.apply(p);
这一行代码是把统计的那一行放在最后了
你可以试着把这一行插入第0行 试试看！ 我现在在开发别的项目 不方便搭环境 你试试看！
extjs labelalign有什么作用
form中的元素的label的位置，比如文本框前面的标签，可以通过labelalign等于"top"调整到上面。
这个只能设置三个值，或者是上面，或者是左面或者是右面。
默认是左面。
需要注意的是，设置为右面right的时候，并不是说，label放在文本框的右面
label仍然在左面，但是右对齐，就是紧贴着文本框。
默认的left是左对齐。
extjs 中ComboBox 下拉框 如何调整上边距margin-top 使它往下一点
可以在外层panel多配置一个空的容器来撑开- -。。
又或者第一个item对象，也就是设备大类那边配个style，里面写margin-top;
看一下Ext JS布局吧。
在extjs中,我怎么设置一个panel的位置,比如距上边缘有多少,距下边缘有多少,左边缘多少,右边缘多少？
不知道你当前是怎么布局的。
如果是按 lokily2010 所说的。
你只需要在panel属性中加上： style : 'margin:10px 5px 15px 20px;'
我使用的是添加属性： margins : '10 5 15 20' 效果和上面应该是一样的
说明：{top:0, right:0, bottom:0, left:0}，顺序是这样的。
属性说明
style : String
作用在组件元素上特定的样式。
