首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

ext 当鼠标移到grid的记要时候弹出窗体并且显示该有的值(特效)

2012-11-01 
ext 当鼠标移到grid的记录时候弹出窗体并且显示该有的值(特效)teacher.initListGrid function(){var col

ext 当鼠标移到grid的记录时候弹出窗体并且显示该有的值(特效)

teacher.initListGrid = function(){   var colMap ={     id:'id',     columns:[{id: "id",header: "<fmt:messagekey='teacher.id' />", hidden:true,hideable:false, dataIndex: 'id'},{header: "<fmt:message key='teacher.name' />", width: 100, sortable: true, locked:false, dataIndex: 'name'}, {header: "<fmt:message key='teacher.sex' />", width: 100, sortable: true, locked:false, dataIndex: 'sex'}, {header: "<fmt:message key='teacher.addres' />", width: 100, sortable: true, locked:false, dataIndex: 'addres'}, header: "<fmt:message key='teacher.dataState' />", hidden:true ,width: 100, sortable: true, locked:false, dataIndex: 'dataState'}]};//IE DELETE var grid = teacher.listGrid = new Ext.grid.GridPanel({    colMap: colMap,    loadMask: {msg:'<fmt:message key="loadData.waitmsg"/>'},    stripeRows: true,              viewConfig: {        forceFit:true        },              showRowNumber:true,               border:false,              dwrFun:teacherManager.getTeachersByDwr,               showPagebar:true,              singleSelect :true,    //鼠标移到grid的数据时显示窗体           afterRender : function(){         this.on('mouseover',this.rowMouseOver,this,{buffer:500});},rowMouseOver : function(e,t){var view = this.viewvar row = view.findRowIndex(t);          if(row!== false){          if(!this.win){this.win = new Ext.Window({id:'goods.win',title : '内容',width : 250,       autoHeight :true,layout : 'fit',border : false,   closeAction : 'hide',items : new Ext.FormPanel({                id : 'form-panel',                 frame : true,                autoHeight : true,                labelWidth : 80,                defaults : {               width : 100,               xtype : 'textfield'},              items :                                         [{fieldLabel : 'id',name : 'id',readOnly:true,allowBlank:false},      {xtype:'box',autoEl:{style:'height:10px'}},             //将两个连接在一起的textfield分开          {fieldLabel : 'name',name : 'name',readOnly:true,allowBlank:false},         {xtype:'box',autoEl:{style:'height:10px'}},         {fieldLabel : 'sex',name : 'sex',readOnly:true,allowBlank:false},                                       {xtype:'box',autoEl:{style:'height:10px'}},         {fieldLabel : 'addres',name : 'addres',readOnly:true,allowBlank:false},         {xtype:'box',autoEl:{style:'height:10px'}},         {fieldLabel : 'dataState',name : 'dataState',readOnly:true,allowBlank:false}]      }),            //收缩小图标 以及实习的功能      tools : [{                                                 id :'pin',                                                 qtip : '禁用自动收缩',                                                 hidden : true,                                                 handler :                                        function(event, el, panel){                                 removeWinEvent ("goods.win");         Ext.getDom(panel.tools['pin'].id).style.display = "none";        Ext.getDom(panel.tools['unpin'].id).style.display = "block";                                              }                                                }, {                                                 id :'unpin',                                                 qtip : '启动自动收缩',                                                 hidden : true,                                                 handler : function(event, el, panel){                                 setWinEvent("goods.win");         Ext.getDom(panel.tools['pin'].id).style.display = "block";          Ext.getDom(panel.tools['unpin'].id).style.display = "none";                                                  }                                               }],                           listeners : {                                'beforeshow' : function(cmp) {                                  setWinEvent("goods.win");                                                }                                    }         });         //当启动自动收缩的时候的事件  就是鼠标移过去的时候就显示 移开的时候就收缩  function setWinEvent(winId) {              var winPanel = Ext.getCmp(winId);               Ext.get(winId).on('mouseover', function() {               if (winPanel.collapsed) {               winPanel.expand();               Ext.getDom(winPanel.tools['pin'].id).style.display = "block";               Ext.getDom(winPanel.tools['unpin'].id).style.display = "none";               }               });               Ext.get(winId).on('mouseleave', function() {              if (!winPanel.collapsed) {               winPanel.collapse();              Ext.getDom(winPanel.tools['pin'].id).style.display = "none";              Ext.getDom(winPanel.tools['unpin'].id).style.display = "none";              }              });              }            //移除事件          function removeWinEvent(winId){          Ext.get(winId).removeAllListeners();             };  }//显示窗体的位置this.win.setPosition(e.getXY());//this.win.setPosition(2,200);this.win.show();//过2秒显示的窗体自动关闭//this.win.close.defer(2000,this.win);/*//新建一个任务  var task = {                  run: function(){                     Ext.getCmp('goods.win').hide();                  },                  interval: 100 //秒   刷新一次                  }                 var runner = new Ext.util.TaskRunner();                 runner.start(task);*//*this.win.on("beforedestroy", function(obj) {                   Ext.MessageBox.alert("信息", "想关闭我,那是不可能的"),                  obj.show();                  return false;                },this,{delay:2000});   */this.win.toFront();this.fillData(this.getStore().getAt(row));}        },       beforeDestroy : function(){Ext.destroy(this.win);//摧毁win的窗体},//给窗体的form表单填入数据fillData : function(record){var form =  Ext.getCmp('form-panel').getForm();form.setValues(record.data);}});}

代码在此。。。请牛人们多多指教...晚辈献丑了...

热点排行