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

作用在組件元素上特定的樣式。