感恩 2009-05-07 12:59
浏览 234
已采纳

firefox中grid上下按键

gridpanel面板中有一个id为title的textfield编辑框,有一个gird表格.
在ie里 textfield编辑框按下 down 键光标焦点转到 grid 的第一行,
为什么在 firefox里  光标焦点就转不到grid的第一行呢.
title的按键设置是:
    var TextFielddown=Ext.get("title");
    new Ext.KeyMap(TextFielddown, {
        key:40,
        fn: function(e){
            grid.getSelectionModel().selectFirstRow();
            var row = grid.getView().getRow(0);
            Ext.get(row).focus();
        },
        scope : TextFielddown
    });
在firefox下应该怎样做.
问题补充
在使用谷歌的浏览器的时候,用上面的代码,光标的焦点也不能到grid表格的第一行,
用什么方法可以,请指点指点.谢谢.
问题补充：
<HTML>
<HEAD>
  <TITLE>Ext.grid.GridPanel示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
  <script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="/extjs/ext-all.js"></script>
  <script type="text/javascript" src="/extjs/source/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
        //定义数据二维数组
        var data=[
                    ['列1内容1', '列2内容1','列3内容1','列4内容1', '列5内容1','列6内容1'],
                    ['列1内容2', '列2内容2','列3内容2','列4内容2', '列5内容2','列6内容2'],
                    ['列1内容3', '列2内容3','列3内容3','列4内容3', '列5内容3','列6内容3'],
                    ['列1内容4', '列2内容4','列3内容4','列4内容4', '列5内容4','列6内容4'],
                    ['列1内容5', '列2内容5','列3内容5','列4内容5', '列5内容5','列6内容5'],
                    ['列1内容6', '列2内容6','列3内容6','列4内容6', '列5内容6','列6内容6'],
                    ['列1内容7', '列2内容7','列3内容7','列4内容7', '列5内容7','列6内容7'],
                    ['列1内容8', '列2内容8','列3内容8','列4内容8', '列5内容8','列6内容8']
            ];
        //整理数据定义3列的索引为con1,con2,con3
        var store=new Ext.data.SimpleStore({
                      data:data,fields:['con1','con2','con3','con4','con5','con6']
            });
        //定义勾选框，不需要可不必定义
        var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:true});
        //定义列
        var colm=new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
            sm,//勾选框，不需要可不必定义
            {header:'第一',dataIndex:'con1'},
            {header:'第二',dataIndex:'con2'},
            {header:'第三',dataIndex:'con3'},
            {header:'第四',dataIndex:'con4'},
            {header:'第五',dataIndex:'con5'},
            {header:'第六',dataIndex:'con6'}
        ]);
        //生成表格
        var grid = new Ext.grid.GridPanel({
            id:'gridtx',
            layout:'fit',
            autoScroll:true,
            renderTo:'grid-div',
            title:"显示同学信息列表",
            height:350,
            width:900,
            cm:colm,
            sm:sm,
            store:store,
            tbar: new Ext.Toolbar({
                height:40,
                autoScroll:true,
                style:"padding:10px",
                items:['-',
                    '查询条件',
                    '-',
                    new Ext.form.TextField({     //加入表单元素
                        id:'xmname',
                        width:100
                    }),'-',{
                        text:"确认条件查询",
                        handler: function(){
                        }
                    }
                ]
            }) ,
            bbar: new Ext.PagingToolbar({
                store: store,
                pageSize:20,
                displayInfo: false,
                style:"padding:10px",
                height:40
            })
        });
        var gridel=Ext.get("gridtx");
        new Ext.KeyMap(gridel, [{
            key:119,
            fn: function(e){
                 var gridtoxmtj=Ext.get('xmname');
                 gridtoxmtj.focus();
            },
            scope : gridel
        }]);
        var xmnameel=Ext.get("xmname");
        new Ext.KeyMap(xmnameel, [{
            key:40,
            fn: function(e){
                 grid.getSelectionModel().selectFirstRow();
                 var row = grid.getView().getRow(0);
                 Ext.get(row).focus();
            },
            scope : xmnameel
        }]);
  });
  </script>
</HEAD>
<BODY style="margin=10 10 10 10;">
  <div id='grid-div'></div>
</BODY>
</HTML>
问题补充：
我就是想要在另外的两个浏览器中也能够定位在第一行,还能够上下移动.这样的结果.
问题补充：
谢谢,非常感谢.

  • 写回答

3条回答 默认 最新

  • zhoujuan520 2009-05-10 18:59
    关注

    帮你实现了
    [code="js"]
    Ext.onReady(function() {
    var data = [['列1内容1', '列2内容1', '列3内容1', '列4内容1', '列5内容1', '列6内容1'], ['列1内容2', '列2内容2', '列3内容2', '列4内容2', '列5内容2', '列6内容2'],
    ['列1内容3', '列2内容3', '列3内容3', '列4内容3', '列5内容3', '列6内容3'], ['列1内容4', '列2内容4', '列3内容4', '列4内容4', '列5内容4', '列6内容4'], ['列1内容5', '列2内容5', '列3内容5', '列4内容5', '列5内容5', '列6内容5'],
    ['列1内容6', '列2内容6', '列3内容6', '列4内容6', '列5内容6', '列6内容6'], ['列1内容7', '列2内容7', '列3内容7', '列4内容7', '列5内容7', '列6内容7'], ['列1内容8', '列2内容8', '列3内容8', '列4内容8', '列5内容8', '列6内容8']];
    var store = new Ext.data.SimpleStore({
    data : data,
    fields : ['con1', 'con2', 'con3', 'con4', 'con5', 'con6']
    });
    var sm = new Ext.grid.CheckboxSelectionModel({
    singleSelect : true
    });
    var colm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
    header : '第一',
    dataIndex : 'con1'
    }, {
    header : '第二',
    dataIndex : 'con2'
    }, {
    header : '第三',
    dataIndex : 'con3'
    }, {
    header : '第四',
    dataIndex : 'con4'
    }, {
    header : '第五',
    dataIndex : 'con5'
    }, {
    header : '第六',
    dataIndex : 'con6'
    }]);
    var grid = new Ext.grid.GridPanel({
    id : 'gridtx',
    autoScroll : true,
    renderTo : document.body,
    title : "显示同学信息列表",
    height : 350,
    width : 900,
    cm : colm,
    sm : sm,
    store : store,
    tbar : ['查询条件', {
    xtype : 'textfield',
    width : 100,
    enableKeyEvents : true,
    listeners : {
    'keydown' : function(field, e) {
    if (e.getKey() == Ext.EventObject.DOWN) {
    grid.getView().getRow(0).focus();
    grid.getSelectionModel().selectFirstRow();
    grid.getView().focusRow(0);
    }
    }
    }
    }, '-', {
    text : "确认条件查询",
    handler : function() {
    }
    }],
    bbar : new Ext.PagingToolbar({
    xtype : 'paging',
    store : store,
    pageSize : 20,
    displayInfo : false
    })
    });
    });
    [/code]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？