extjs编辑框框top上移的简单介绍

本文目录一览：

• 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

作用在组件元素上特定的样式。