本文目录一览：
- 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
style='cursor:pointer;'
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
style="cursor:pointer;"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"
style="width:
100%;
height:
100%;"
/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啦
