包含extjsgrid懸浮框的大小的詞條

本文目錄一覽：

1、怎麼設置懸浮窗
2、解決extjs grid 不隨窗口大小自適應的改變問題
3、extjs:gridpanel 列寬如何自適應瀏覽器的寬度
4、extjs的grid列寬調整問題
5、(加分)Extjs grid中滑鼠觸發事件
6、如何改變extjs中gridpanel單元格邊框，上下邊框

怎麼設置懸浮窗

打開【微信】，點擊進入好友聊天界面，打開文件，輕點右上角【更多】，選擇【浮窗】，即可打開微信小窗口，回到首頁，點擊左上角浮窗圖標或者右滑，即可打開文件；輕點【返回】圖標，再點【刪除】圖標即可關閉小窗口。

懸浮窗是電腦或智能手機的系統工具，在其他應用的表面懸浮一可移動的窗口，以便打開不同應用，手機使用懸浮窗需要系統授權。

懸浮窗屬於軟體自帶的小窗口或者懸浮功能顯示，可以將軟體的操作窗口懸浮於軟體界面上方或者桌面上。

在下載軟體時節約更多的系統資源，而且還能顯示下載任務的速度以及完成度等信息。

解決extjs grid 不隨窗口大小自適應的改變問題

在使用grid的時候窗口改變了但是grid卻不能自適應，下面有個不粗的解決方法，大家可以參考下

最近遇到的問題，在使用grid的時候窗口改變了但是grid卻不能自適應的改變於是加了一條這行語句

問題就解決了，效果圖

拖大後的效果

添加的語句：

代碼如下:

Ext.EventManager.onWindowResize(function(){

grid1.getView().refresh()

})

參看完整代碼；

代碼如下:

html

xmlns=””

head

extjs:gridpanel 列寬如何自適應瀏覽器的寬度

用.x-grid3-header-offset{width:auto;} 就可以實現；

參考代碼如下：

/*store之類的就省略了*/

var sm = new Ext.grid.CheckboxSelectionModel({

handleMouseDown : function(){}

});

var gridColumn = new Ext.grid.ColumnModel([

sm,

{header:’地市’,dataIndex:’areaName’,width:200},

{header:’品牌’,dataIndex:’brandName’,width:200},

{header:’指標’,dataIndex:’busiTypeName’,width:200},

{header:’1日’,dataIndex:’day1′,width:200},

{header:’2日’,dataIndex:’day2′,width:200},

{header:’3日’,dataIndex:’day3′,width:200},

{header:’4日’,dataIndex:’day4′,width:200},

{header:’5日’,dataIndex:’day5′,width:200}

]);

var gridPanel = new Ext.grid.GridPanel({

id: ‘gridPanelId’,

cm: gridColumn,

sm: sm,

ds: gridStore,

frame: true,

autoScroll: true,

height: 550,

tbar: topToolbar,

bbar: new Ext.PagingToolbar({

id: ‘pagingToolbarId’,

store: gridStore,

displayInfo: true,

pageSize: 10

})

});

var linePanel = new Ext.Panel({

id: ‘linePanelId’,

frame: true,

contentEl: ‘myChartId’,

height: 550

});

var backPanel = new Ext.Panel({

id: ‘backPanelId’,

frame: true,

autoScroll: true,

items: [gridPanel, linePanel]

});

new Ext.Viewport({

layout: ‘fit’,

items: backPanel

注意：不要設置viewConfig: {forceFit: true}，這個是把列寬(即ColumnModel的寬度)設置為自動寬度，不是整個GridPanel的寬度。

extjs的grid列寬調整問題

簡單點：在column中加上

renderer: function (value, meta, record) {

meta.style = ‘overflow:visible;white-space:normal;’;

return value;

}

可以自動換行，如果要加Tip

前面加上：

Ext.tip.QuickTipManager.init();

column中加上：

renderer: function (value, meta, record) {

meta.tdAttr = ‘data-qtip=”‘ + value + ‘”‘;

return value;

}

(加分)Extjs grid中滑鼠觸發事件

html

head

titleDebug Console/title

link rel=”stylesheet” type=”text/css” href=”../../resources/css/ext-all.css” /

link rel=”stylesheet” type=”text/css” href=”debug.css” /

!– GC —

!– LIBS —

script type=”text/javascript” src=”../../adapter/ext/ext-base.js”/script

!– ENDLIBS —

script type=”text/javascript” src=”../../ext-all.js”/script

script type=”text/javascript”

Ext.onReady(function(){

var cm = new Ext.grid.ColumnModel([

{header:’編號’,dataIndex:’id’,width:35},

{header:’名稱’,dataIndex:’name’,width:80},

{header:’描述’,dataIndex:’descn’,width:120}

]);

var data = [

[‘1′,’name1′,’descn1’],

[‘2′,’name2′,’descn2’],

[‘3′,’name3′,’descn3’],

[‘4′,’name4′,’descn4’],

[‘5′,’name5′,’descn5’]

];

var store = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(data),

reader: new Ext.data.ArrayReader({}, [

{name: ‘id’},

{name: ‘name’},

{name: ‘descn’}

])

});

store.load();

var grid = new Ext.grid.GridPanel({

autoHeight: true,

renderTo: ‘grid’,

store: store,

cm: cm,

viewConfig: {

forceFit: true

}

});

grid.on(‘mouseover’,function(e){//添加mouseover事件

var index = grid.getView().findRowIndex(e.getTarget());//根據mouse所在的target可以取到列的位置

if(index!==false){//當取到了正確的列時，（因為如果傳入的target列沒有取到的時候會返回false）

var record = store.getAt(index);//把這列的record取出來

var str = Ext.encode(record.data);//組裝一個字元串，這個需要你自己來完成，這兒我把他序列化

var rowEl = Ext.get(e.getTarget());//把target轉換成Ext.Element對象

rowEl.set({

‘ext:qtip’:str //設置它的tip屬性

},false);

}

});

var win = new Ext.Window({

id:’window’,

el:’window-win’,

layout:’fit’,

width:500,

height:270,

closeAction:’hide’,

items: [grid]

});

win.show();

Ext.QuickTips.init();//注意，提示初始化必須要有

});

/script

/head

body

div id=”window-win”

div id=”grid”/div

/body

/html

————————————————————–

我比較愛好ext，曾經寫了不少這方面的代碼，

以上代碼是現寫的，調試通過，

以後大家可以討論討論

如何改變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啦

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/190007.html

包含extjsgrid懸浮框的大小的詞條

本文目錄一覽：

怎麼設置懸浮窗

解決extjs grid 不隨窗口大小自適應的改變問題

extjs:gridpanel 列寬如何自適應瀏覽器的寬度

extjs的grid列寬調整問題

(加分)Extjs grid中滑鼠觸發事件

如何改變extjs中gridpanel單元格邊框，上下邊框

相關推薦

發表回復