Extjs4表头及列头事件

最新推荐文章于 2018-03-06 20:43:56 发布

Tree-New_Bee

最新推荐文章于 2018-03-06 20:43:56 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/liweibin_/article/details/9962685

版权

JS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

ExtJS获取父子、兄弟容器元素方法

1.当前对象的父对象(上级对象)
this.ownerCt:

2.当前对象的下一个相邻的对象
this.nextSibling();

3.当前对象的上一个相邻的对象
this.previousSibling();

4.当前容器中的第一个子对象
this.get(0);
this.items.first();

5.当前容器的最后一个子对象
this.items.last();

6.查找当前对象的所有上级匹配的容器
this.findParentByType(String xtype)

7.查找当前对象的所有下级匹配的组件

this.findByType(String xtype)

grid 表头鼠标事件

博客分类：
ext基础

EXT HTML

Js代码

grid.addListener("cellclick", cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert("show","当前选中的数据是"+data);
}

Js代码

headermousedown ( Grid this, Number columnIndex, Ext.EventObject e )
//当头部被单击之前触发。
headerclick ( Grid this, Number columnIndex, Ext.EventObject e )
头部（header）被单击时触发

4.如何做Grid中做出快捷菜单效果：

Js代码

grid.addListener("rowcontextmenu", rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
id:"rightClickCont", //在HTML文件中必须有个rightClickCont的DIV元素
items: [
{
id: "rMenu1",
handler: rMenu1Fn,//点击后触发的事件
text: "右键菜单1"
},
{
//id: "rMenu2",
//handler: rMenu2Fn,
text: "右键菜单2"
}
]
});
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
Ext.MessageBox.alert("right","rightClick");
}

关于extjs4.0 grid中跨页显示checkbox选中状态的思路以及当checkbox全选执行的事件

最近有会员在论坛上问如何在grid里实现跨页选中，也就是当我在第一页选中的checkbox，在我Load到第二页时返回第一页时还能显示，这个我以前在3.3中实现过，也就是定义一个：var recordIds = new Ext.util.MixedCollection();
然后监听checkbox的select，与deselect方法，当是select时就把当前的选择行的id加入到这个集合中，当deselect时就把集合里的id去除掉！监听grid的Load方法，然后循环当前的store，当store里值与recordIds的值匹配时，就在自定义的数组里加一个，然后调用checkbox的select方法，选中：
store.each(function(record){
if(recordIds.contains(record.data.id))
arry.push(record)
checkboxModel.select(arry,true);
});

但是到了4.0里有一个问题，当grid在转到下一页时，也就是load的时候他会默认调用deselectAll这个方法，就会把我之前选中的数据全部清除掉，很是麻烦，后来自己实验了一下，grid的beforeload事件里recordIds 里面的值还存在，所以我现在的解决方法就是监听grid的beforeload方法，当进入这个方法时，调用checkbox的removeListener('deselect')去掉这个监听，当load的时候再addListeners加上这个监听，就可以完美的解决这个问题

以上解决后，还有一个问题，就是checkbox里点击grid列头的全选中按钮时，他并没有执行select,和deselect这两个事件，也就是当你想要全选某一页时，他并没有把值加到recordIds 里去，所以当你Load到下一页时值并没有被保存起来，
这个解决方法就是监听grid的headerCt的headerclick方法，代码如下：
this.gridPanel.headerCt.on('headerclick',function(headerCt,column,e,t){
   var checkHd  = headerCt.child('gridcolumn[isCheckerHd]');
   var isChecked = checkHd.el.hasCls(Ext.base CSSPrefix + 'grid-hd-checker-on');
         if (checkHd) {
            if (isChecked) {
            var store = me.gridPanel.getStore();
            store.data.each(function(item){
               if(recordIds.contains(item.data.id)){
               recordIds.remove(item.data.id);
               }
               });
            } else {
            var store = me.gridPanel.getStore();
            store.data.each(function(item){
               if(!recordIds.contains(item.data.id)){
               recordIds.add(item.data.id);
               }
               });
            }
         }
})

ext grid 单击事件

博客分类：
ext基础

EXT

EXTJS GRID 中单击行和单元格获得行或者单元格的内容(数据)

Js代码

grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}

------------------------------------------------------------------------------

Js代码

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);
}
});

---------------------------------------------------------------------------------

Js代码

listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ }
}
//这是单击grid单元格时，触发的事件

Js代码

grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";

我要改变都是整个背景色，不是光是字的颜色。还有怎么能点一个单元格时候，让上次的点的单元格颜色恢复到原来呢？？？
把表格刷新下可以把以前单击而改变的颜色还原，grid.getView().refresh(); 然后再让这次单击的单元格变色。

Js代码

grid.getView().refresh();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";

Ext4.1 给grid panel的header添加单击事件

(2013-04-12 17:04:02)

转载▼

标签：

listeners: {

click: {

element:'el', //bind to the underlying el property on the panel

fn:function(){ console.log('click el'); }

}

Extjs4 grid 表头header点击事件获取

有个需求找了半天终于找到了。

原来一直纠结在是不是要找column 的API

直接找到grid 后就行了。

<script>
    initComponent: function(){
        this.callParent(arguments);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
        var _List = this.scope;
        _List.headerCt.on("headerclick", function(ct,column,e,t,opts) {
            console.dir(column);
        });
    },
</script>