包含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

meta

http-equiv="Content-Type"

cOntent="text/html;

charset=gb2312"

titlegrid/title

link

href="../ext/resources/css/ext-all.css"

rel="stylesheet"

type="text/css"

/

script

src="../ext/adapter/ext/ext-base.js"

type="text/Javascript"/script

script

src="../ext/ext-all.js"

type="text/Javascript"/script

script

type="text/Javascript"

Ext.onReady(function()

{

function

renderAdmin()

{

return

"

span

Onclick='alert();'img

src='../IMAGES/icons/email.jpg'/

/a/span";

}

var

sm=

new

Ext.grid.CheckboxSelectionModel();

//

var

sm1=

new

Ext.grid.RowSelectionModel({singleSelect:true}),

var

cm=new

Ext.grid.ColumnModel([

new

Ext.grid.RowNumberer(),

sm,

//

sm1,

{header:'span

img

src="../IMAGES/icons/email.jpg"/

/a/span',dataIndex:'admin',width:30,renderer:renderAdmin,sortable:false},

{header:'ID',dataIndex:'id'},

{id:'name',header:'名称',dataIndex:'name'},

{header:'发送人',dataIndex:'from'},

{header:'收件人',dataIndex:'to'}

]);

var

data=[

['','001','收件单一','张三','李四'],

['','002','收件单二','张四','李五'],

['','003','收件单三','张六','李七']

];

var

store=

new

Ext.data.Store({

proxy:new

Ext.data.MemoryProxy(data),

reader:new

Ext.data.ArrayReader({},[

{name:'admin'},

{name:'id'},

{name:'name'}

,

{name:'from'},

{name:'to'}

])

});

store.load();

var

grid1=

new

Ext.grid.GridPanel({

renderTo:'grid1',

name:'grid1',

layout:'fit'

,

title:'收件单',

autoHeight:true,

autoWidth:true,

bodyStyle:'width:100%',

loadMask

:true,

//autoExpandColumn:'name',

autoWidth:true,

//

tbar:[{text:'发送',

//

icon:

'../Images/icons/application_edit.jpg',

//

cls:

'x-btn-text-icon'},

//

{text:'删除',

//

icon:

'../Images/icons/application_edit.jpg',

//

cls:

'x-btn-text-icon'}],

store:store,

frame:true,

cm:cm,

sm:sm,

viewConfig:{

forceFit:true},

listeners

:

{

rowdblclick

:

function(n)

{

//获取当前选中行，

输向

//

debugger;

var

iid=

grid.getSelectionModel().getSelected().data.id

;

window.location.href="SubFrame.html?id="+iid;

}

}

});

Ext.EventManager.onWindowResize(function(){

grid1.getView().refresh()

})

});

/script

/head

body

div

id="grid1"

/div

/body

/html

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啦