2016-08-01 14 views
0

dgridでエディタウィジェットとして正しく動作するようにカスタムウィジェット(_WidgetBase_TemplatedMixin、& から継承)を取得する際に問題が発生しています。dgridを使ってカスタムエディタウィジェットをフォーカスする方法は?

具体的には、列間のフォーカスの管理に問題があります。ある列のウィジェットを編集して別の列に移動しようとすると、新しい列のエディタウィジェットはフォーカスしません。何かアドバイスのために、事前に、

console.clear(); 
 

 
require({ 
 
    packages: [ 
 
    { 
 
     name: 'dgrid', 
 
     location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' 
 
    }, 
 
    { 
 
     name: 'dstore', 
 
     location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' 
 
    } 
 
    ] 
 
}, [ 
 
    'dojo/_base/declare', 
 
    'dojo/keys', 
 
    'dojo/on', 
 
    
 
    'dgrid/Editor', 
 
    'dgrid/Keyboard', 
 
    'dgrid/OnDemandGrid', 
 
    'dgrid/Selection', 
 
    
 
    'dijit/_WidgetBase', 
 
    'dijit/_TemplatedMixin', 
 
    'dijit/_FocusMixin', 
 
    
 
    'dstore/Memory', 
 
    'dstore/Trackable', 
 
    
 
    'dojo/domReady!' 
 
], function (
 
    declare, 
 
    keys, 
 
    on, 
 
    
 
    Editor, 
 
    Keyboard, 
 
    OnDemandGrid, 
 
    Selection, 
 
    
 
    _WidgetBase, 
 
    _TemplatedMixin, 
 
    _FocusMixin, 
 
    
 
    Memory, 
 
    Trackable 
 
) { 
 
    var EditWidget = declare([_WidgetBase, _TemplatedMixin, _FocusMixin], { 
 
    templateString: '<div><input data-dojo-attach-point="textBox" type="text"></div>', 
 
    focus: function() { 
 
     this.textBox.focus(); 
 
    }, 
 
    _getValueAttr: function() { 
 
     return this.textBox.value; 
 
    }, 
 
    _setValueAttr: function (newValue) { 
 
     this.textBox.value = newValue; 
 
    }, 
 
    postCreate: function() { 
 
     var that = this; 
 
     
 
     on(this.textBox, 'blur', function() { 
 
     that.emit('blur'); 
 
     }); 
 
     
 
     this.inherited(arguments); 
 
    } 
 
    }); 
 
    
 
    
 
    var grid = new (declare([OnDemandGrid, Keyboard, Selection, Editor]))({ 
 
    selectionMode: 'single', 
 
    noDataMessage: 'no data', 
 
    columns: [{field: 'ID', sortable: false}, { 
 
     autoSave: true, 
 
     field: 'LENGTH', 
 
     editor: EditWidget, 
 
     sortable: false, 
 
     editOn: 'dgrid-cellfocusin' 
 
    }, { 
 
     autoSave: true, 
 
     field: 'WEIGHT', 
 
     editor: EditWidget, 
 
     sortable: false, 
 
     editOn: 'dgrid-cellfocusin' 
 
    }, { 
 
     autoSave: true, 
 
     field: 'HEIGHT', 
 
     editor: EditWidget, 
 
     sortable: false, 
 
     editOn: 'dgrid-cellfocusin' 
 
    }], 
 
    deselectOnRefresh: false 
 
    }, document.getElementById('gridDiv')); 
 
    
 
    var store = new (declare([Trackable, Memory]))({ 
 
     data: [{ID: 1, LENGTH: '', WEIGHT: '', HEIGHT: ''}, 
 
      {ID: 2, LENGTH: '', WEIGHT: '', HEIGHT: ''}, 
 
      {ID: 3, LENGTH: '', WEIGHT: '', HEIGHT: ''}], 
 
     idProperty: 'ID' 
 
    }); 
 

 
    grid.set('collection', store); 
 
    grid.startup(); 
 
    
 
    var onGridKeydown = function (e) { 
 
    var modifierKeys = [ 
 
     keys.TAB, 
 
     keys.LEFT_ARROW, 
 
     keys.UP_ARROW, 
 
     keys.RIGHT_ARROW, 
 
     keys.DOWN_ARROW 
 
    ]; 
 

 
    var advance = function() { 
 
     Keyboard.moveFocusRight.call(grid, e); 
 
    }; 
 
    var retreat = function() { 
 
     Keyboard.moveFocusLeft.call(grid, e); 
 
    }; 
 

 
    if (modifierKeys.indexOf(e.keyCode) !== -1) { 
 
     switch (e.keyCode) { 
 
      case keys.TAB: 
 
       if (!e.shiftKey) { 
 
        advance(); 
 
       } else { 
 
        retreat(); 
 
       } 
 
       break; 
 
      case keys.LEFT_ARROW: 
 
       retreat(); 
 
       break; 
 
      case keys.RIGHT_ARROW: 
 
       advance(); 
 
       break; 
 
      case keys.UP_ARROW: 
 
       Keyboard.moveFocusUp.call(grid, e); 
 
       break; 
 
      case keys.DOWN_ARROW: 
 
       Keyboard.moveFocusDown.call(grid, e); 
 
       break; 
 
     } 
 
    }  
 
    }; 
 
    
 
    grid.on('keydown', onGridKeydown); 
 
});
.dgrid { 
 
    height: 300px; 
 
} 
 
.dgrid-row { 
 
    height: 25px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Custom dgrid editor widget</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script> 
 
    <link rel="stylesheet" href="//cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css"> 
 
</head> 
 
<body> 
 
    <p>Click in a cell in the "LENGTH" column and type in a character. Then hit "TAB". Why doesn't the next cell's textbox focus?</p> 
 
    <div id='gridDiv'></div> 
 
</body> 
 
</html>

ありがとう:
は、ここでストリップダウン例です。

+0

あなたが持っている場合問題は、あなたはあなたのことについて尋ねる必要があります別の方法で発行します。ドキュメントを読んでみたいと思っている人にはうれしいですが、オフサイトのリソースを求めているのです。本、ツール、ソフトウェアライブラリ、チュートリアル、その他のオフサイトリソースを推奨するか**見つけるように私たちに質問する質問はありません。彼らが有害な回答と迷惑メールを引き付けてしまう傾向があるため、Stack Overflowのための-topic **。代わりに、問題を説明し、それを解決するためにこれまでに何が行われているかを記述します。 – Makyen

答えて

0

Editorウィジェットの唯一の欠点は、startupメソッドです。
プレインテキストボックスで

console.clear(); 
 

 
require({ 
 
    packages: [ 
 
    { 
 
     name: 'dgrid', 
 
     location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' 
 
    }, 
 
    { 
 
     name: 'dstore', 
 
     location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' 
 
    } 
 
    ] 
 
}, [ 
 
    'dojo/_base/declare', 
 
    'dojo/keys', 
 
    'dojo/on', 
 
    
 
    'dgrid/Editor', 
 
    'dgrid/Keyboard', 
 
    'dgrid/OnDemandGrid', 
 
    'dgrid/Selection', 
 
    
 
    'dijit/_WidgetBase', 
 
    'dijit/_TemplatedMixin', 
 
    'dijit/_FocusMixin', 
 
    
 
    'dstore/Memory', 
 
    'dstore/Trackable', 
 
    
 
    'dojo/domReady!' 
 
], function (
 
    declare, 
 
    keys, 
 
    on, 
 
    
 
    Editor, 
 
    Keyboard, 
 
    OnDemandGrid, 
 
    Selection, 
 
    
 
    _WidgetBase, 
 
    _TemplatedMixin, 
 
    _FocusMixin, 
 
    
 
    Memory, 
 
    Trackable 
 
) { 
 
    var EditWidget = declare([_WidgetBase, _TemplatedMixin, _FocusMixin], { 
 
    templateString: '<div><input data-dojo-attach-point="textBox" type="text"></div>', 
 
    focus: function() { 
 
     this.textBox.focus(); 
 
    }, 
 
    _getValueAttr: function() { 
 
     return this.textBox.value; 
 
    }, 
 
    _setValueAttr: function (newValue) { 
 
     this.textBox.value = newValue; 
 
    }, 
 
    postCreate: function() { 
 
     var that = this; 
 
     
 
     on(this.textBox, 'blur', function() { 
 
     that.emit('blur'); 
 
     }); 
 
     
 
     this.inherited(arguments); 
 
    }, 
 
    startup: function() { 
 
     this.focus(); 
 
    } 
 
    }); 
 
    
 
    
 
    var grid = new (declare([OnDemandGrid, Keyboard, Selection, Editor]))({ 
 
    selectionMode: 'single', 
 
    noDataMessage: 'no data', 
 
    columns: [{field: 'ID', sortable: false}, { 
 
     autoSave: true, 
 
     field: 'LENGTH', 
 
     editor: EditWidget, 
 
     sortable: false, 
 
     editOn: 'dgrid-cellfocusin' 
 
    }, { 
 
     autoSave: true, 
 
     field: 'WEIGHT', 
 
     editor: EditWidget, 
 
     sortable: false, 
 
     editOn: 'dgrid-cellfocusin' 
 
    }, { 
 
     autoSave: true, 
 
     field: 'HEIGHT', 
 
     editor: EditWidget, 
 
     sortable: false, 
 
     editOn: 'dgrid-cellfocusin' 
 
    }], 
 
    deselectOnRefresh: false 
 
    }, document.getElementById('gridDiv')); 
 
    
 
    var store = new (declare([Trackable, Memory]))({ 
 
     data: [{ID: 1, LENGTH: '', WEIGHT: '', HEIGHT: ''}, 
 
      {ID: 2, LENGTH: '', WEIGHT: '', HEIGHT: ''}, 
 
      {ID: 3, LENGTH: '', WEIGHT: '', HEIGHT: ''}], 
 
     idProperty: 'ID' 
 
    }); 
 

 
    grid.set('collection', store); 
 
    grid.startup(); 
 
    
 
    var onGridKeydown = function (e) { 
 
    var modifierKeys = [ 
 
     keys.TAB, 
 
     keys.LEFT_ARROW, 
 
     keys.UP_ARROW, 
 
     keys.RIGHT_ARROW, 
 
     keys.DOWN_ARROW 
 
    ]; 
 

 
    var advance = function() { 
 
     Keyboard.moveFocusRight.call(grid, e); 
 
    }; 
 
    var retreat = function() { 
 
     Keyboard.moveFocusLeft.call(grid, e); 
 
    }; 
 

 
    if (modifierKeys.indexOf(e.keyCode) !== -1) { 
 
     switch (e.keyCode) { 
 
      case keys.TAB: 
 
       if (!e.shiftKey) { 
 
        advance(); 
 
       } else { 
 
        retreat(); 
 
       } 
 
       break; 
 
      case keys.LEFT_ARROW: 
 
       retreat(); 
 
       break; 
 
      case keys.RIGHT_ARROW: 
 
       advance(); 
 
       break; 
 
      case keys.UP_ARROW: 
 
       Keyboard.moveFocusUp.call(grid, e); 
 
       break; 
 
      case keys.DOWN_ARROW: 
 
       Keyboard.moveFocusDown.call(grid, e); 
 
       break; 
 
     } 
 
    }  
 
    }; 
 
    
 
    grid.on('keydown', onGridKeydown); 
 
});
.dgrid { 
 
    height: 300px; 
 
} 
 
.dgrid-row { 
 
    height: 25px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Custom dgrid editor widget</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script> 
 
    <link rel="stylesheet" href="//cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css"> 
 
</head> 
 
<body> 
 
    <p>Click in a cell in the "LENGTH" column and type in a character. Then hit "TAB".</p> 
 
    <div id='gridDiv'></div> 
 
</body> 
 
</html>

startup方法は、Dojoウィジェットのライフサイクルの一部である):

console.clear(); 
 

 
require({ 
 
    packages: [ 
 
    { 
 
     name: 'dgrid', 
 
     location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' 
 
    }, 
 
    { 
 
     name: 'dstore', 
 
     location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' 
 
    } 
 
    ] 
 
}, [ 
 
    'dojo/_base/declare', 
 
    'dojo/keys', 
 
    'dojo/on', 
 
    
 
    'dgrid/Editor', 
 
    'dgrid/Keyboard', 
 
    'dgrid/OnDemandGrid', 
 
    'dgrid/Selection', 
 

 
    'dstore/Memory', 
 
    'dstore/Trackable', 
 
    
 
    'dojo/domReady!' 
 
], function (
 
    declare, 
 
    keys, 
 
    on, 
 
    
 
    Editor, 
 
    Keyboard, 
 
    OnDemandGrid, 
 
    Selection, 
 
    
 
    Memory, 
 
    Trackable 
 
) { 
 
    
 
    var grid = new (declare([OnDemandGrid, Keyboard, Selection, Editor]))({ 
 
    selectionMode: 'single', 
 
    noDataMessage: 'no data', 
 
    columns: [{field: 'ID', sortable: false}, { 
 
     autoSave: true, 
 
     field: 'LENGTH', 
 
     editor: 'text', 
 
     sortable: false, 
 
     editOn: 'focus' 
 
    }, { 
 
     autoSave: true, 
 
     field: 'WEIGHT', 
 
     editor: 'text', 
 
     sortable: false, 
 
     editOn: 'focus' 
 
    }, { 
 
     autoSave: true, 
 
     field: 'HEIGHT', 
 
     editor: 'text', 
 
     sortable: false, 
 
     editOn: 'focus' 
 
    }], 
 
    deselectOnRefresh: false 
 
    }, document.getElementById('gridDiv')); 
 
    
 
    var store = new (declare([Trackable, Memory]))({ 
 
     data: [{ID: 1, LENGTH: '', WEIGHT: '', HEIGHT: ''}, 
 
      {ID: 2, LENGTH: '', WEIGHT: '', HEIGHT: ''}, 
 
      {ID: 3, LENGTH: '', WEIGHT: '', HEIGHT: ''}], 
 
     idProperty: 'ID' 
 
    }); 
 

 
    grid.set('collection', store); 
 
    grid.startup(); 
 
    
 
    var onGridKeydown = function (e) { 
 
    var modifierKeys = [ 
 
     keys.TAB, 
 
     keys.LEFT_ARROW, 
 
     keys.UP_ARROW, 
 
     keys.RIGHT_ARROW, 
 
     keys.DOWN_ARROW 
 
    ]; 
 

 
    var advance = function() { 
 
     Keyboard.moveFocusRight.call(grid, e); 
 
    }; 
 
    var retreat = function() { 
 
     Keyboard.moveFocusLeft.call(grid, e); 
 
    }; 
 

 
    if (modifierKeys.indexOf(e.keyCode) !== -1) { 
 
     switch (e.keyCode) { 
 
      case keys.TAB: 
 
       if (!e.shiftKey) { 
 
        advance(); 
 
       } else { 
 
        retreat(); 
 
       } 
 
       break; 
 
      case keys.LEFT_ARROW: 
 
       retreat(); 
 
       break; 
 
      case keys.RIGHT_ARROW: 
 
       advance(); 
 
       break; 
 
      case keys.UP_ARROW: 
 
       Keyboard.moveFocusUp.call(grid, e); 
 
       break; 
 
      case keys.DOWN_ARROW: 
 
       Keyboard.moveFocusDown.call(grid, e); 
 
       break; 
 
     } 
 
    }  
 
    }; 
 
    
 
    grid.on('keydown', onGridKeydown); 
 
});
.dgrid { 
 
    height: 300px; 
 
} 
 
.dgrid-row { 
 
    height: 25px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Custom dgrid editor widget</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script> 
 
    <link rel="stylesheet" href="//cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css"> 
 
</head> 
 
<body> 
 
    <p>Click in a cell in the "LENGTH" column and type in a character. Then hit "TAB".</p> 
 
    <div id='gridDiv'></div> 
 
</body> 
 
</html>

+0

これについてのヒントをありがとう。しかし、通常のテキストボックスをウィジェットではなくエディタとして使用すると、同じ動作に戻ります。 'エディタ: 'テキスト'。フォーカス作業を行うカスタムウィジェットでない場合は、何を変更する必要がありますか? –

+0

@ScottDavis私は答えを編集しました。実際には私は理由は知っていませんが、 'editOn: 'dgrid-cellfocusin'の代わりに' editOn: 'focus''を使うと、 'editor:' text''が使われるときに問題が解決されるようです。 – ben

+0

hh。それ、変だよ。だから私は[この文書](https://github.com/SitePen/dgrid/blob/master/doc/components/mixins/Editor.md#recommendations-for-the-editon-property)が間違っていると思います。助けてくれてありがとう! –

関連する問題