包含extjsgrid悬浮框的大小的词条

发布时间：2022-11-24

本文目录一览：

  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>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>grid</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'/></span>";
            }
            var sm = new Ext.grid.CheckboxSelectionModel();
            var cm = new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer(),
                sm,
                {header:'<span style="cursor:pointer;"><img src="../IMAGES/icons/email.jpg"/></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,
                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) {
                        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;} 就可以实现； 参考代码如下：

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中鼠标触发事件

<head>
    <title>Debug 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) {
                var index = grid.getView().findRowIndex(e.getTarget());
                if(index !== false) {
                    var record = store.getAt(index);
                    var str = Ext.encode(record.data);
                    var rowEl = Ext.get(e.getTarget());
                    rowEl.set({
                        'ext:qtip': str
                    }, 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中的表格是通过div table tbody tr td div content式的结构书写的。要改变单元格边框的样式就要改变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啦

推荐文章