私は Dojo を初めて使用し、クリックで展開できる Datagrid を作成しようとしています。そこで、データグリッドをタイトルペイン内に配置して、データグリッドをタイトルペインの拡大時に表示できるようにすることにしました。
タイトルペインはうまく機能します。データグリッドを内部に設定できます。これまでのところすべて順調です。唯一の問題は、データグリッド内でクリック イベントを取得できなかったことです。(行の選択、並べ替えなどを行うことができませんでした。)
私は道場1.8.3を使用しています。これが私のコードです
function(taskListModel){ var tasks = taskListModel.getData();
require(["dojo/ready", "dijit/TitlePane", "dojo/dom"], function(ready, TitlePane, dom){
ready(function(){
taskListTitlePane = new dijit.TitlePane({title:"Click here to see Task List", content: "Collapse me!"});
dom.byId("taskListTitlePane").appendChild(taskListTitlePane.domNode);
createTaskDataGrid(tasks);
});
});}
グリッドの作成:
var createTaskDataGrid = function(tasks){
/データ ストアの設定/ var data = { 識別子: "id", 項目: [] };
// push the data into items
for(var i = 0; i < tasks.length; i++){
data.items.push(lang.mixin({ id: i+1 }, tasks[i]));
}
var store = new ItemFileWriteStore({data: data});
/*set up layout*/
var layout = [[
{'name': 'S.No', 'field': 'id', 'width': '10%'},
{'name': 'TaskName', 'field': 'task_name', 'width': '20%'},
{'name': 'Assignee', 'field': 'assignee', 'width': '20%'},
{'name': 'Module', 'field': 'module_name', 'width': '20%'},
{'name': 'DueDate', 'field': 'taskid', 'width': '15%'},
{'name': 'Status', 'field': 'status', 'width': '15%'}
]];
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
autoHeight: true});
/*append the new grid to the div*/
grid.placeAt("tasklistscroller");
/*Call startup() to render the grid*/
grid.startup();
grid.on("RowClick", function(evt){
var idx = evt.rowIndex,
rowData = grid.getItem(idx);
//console.log("row data is = " + rowData.task_name + " " + rowData.taskid);
mainController.taskSelected(rowData.taskid, rowData.task_name);
}, true);
if(taskListTitlePane !== null){
console.log("setting grid inside title pane");
taskListTitlePane.setContent(grid.domNode);
//taskListTitlePane.containerNode.appendChild(grid.domNode);
}}
どんな助けでも素晴らしいでしょう。
ありがとう、