2

我试图在我dojox.grid.DataGrid似乎遇到很多困难的情况下包含一些编辑小部件。我已经尝试了我能想到的一切来让它工作，但有些事情并不顺利。当我开始遇到问题时，我尝试几乎完全从网格测试中复制并模拟我的代码“突破”，但没有成功。网格的基本编辑似乎有效。在下面的示例中，“事件”列允许编辑，但使用该cellType属性的两列不起作用。事实上，他们似乎也忽略了其他属性（如styles），这似乎表明遇到了某种问题，但 FireBug 中没有任何内容。我也在 Chrome 和 Firefox 之间得到相同的行为。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Insert title here</title>
    <link id="themeStyles" rel="stylesheet" href="javascript/dojotoolkit/dijit/themes/tundra/tundra.css">

    <style type="text/css">
    @import "css/gctilog.css";
        @import "javascript/dojotoolkit/dojo/resources/dojo.css";
        @import "javascript/dojotoolkit/dijit/themes/tundra/tundra.css";
        @import "javascript/dojotoolkit/dojox/grid/resources/Grid.css";
        @import "javascript/dojotoolkit/dojox/grid/resources/tundraGrid.css";
        @import "javascript/dojotoolkit/ocp/resources/MultiStateCheckBox.css";
    </style>
    <script type="text/javascript" src="javascript/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true, locale:'en-gb'"></script>
    <script type="text/javascript">
      dojo.require("dojo.currency");
      dojo.require("dijit.dijit");
        dojo.require("dijit.form.HorizontalSlider");
        dojo.require("dojox.data.JsonRestStore");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojox.layout.ExpandoPane");
        dojo.require("dojox.timing");
        dojo.require("ocp.MultiStateCheckBox");
        dojo.require("dojo.parser");

        formatCurrency = function(inDatum){
          return isNaN(inDatum) ? '...' : dojo.currency.format(inDatum, this.constraint);
        }
    </script>
    <script type="text/javascript" src="javascript/formatter.js"></script>
    <script type="text/javascript" src="javascript/utilities.js"></script>
</head>
<body class="tundra">

<div name="labelCallids">Call IDs</div>
<div dojoType="dojox.data.JsonRestStore" id="callidStore4" jsId="callidStore4" target="logmap/maps.php/maps/4/callids/" idAttribute="callid"></div>
<table dojoType="dojox.grid.DataGrid" id="callidGrid4" store="callidStore4" query="{ callid: '*' }" style="width: 950px; border: 1px solid rgb(0,156,221); margin-left: 15px;" clientSort="false" autoHeight="10" noDataMessage="No Call IDs Available...">
  <thead>
    <tr>
      <th field="callid" width="375px">Call ID</th>
      <th cellType="dojox.grid.cells.ComboBox" field="type" options="SIP,TLib" editable="true" width="10em" styles='text-align: center;'>Type</th>
      <th field="event_count" width="40px" editable="true" styles="text-align: right;">Events</th>
      <th field="start_ts" width="75px" formatter="secToHourMinSecMS">Start</th>
      <th field="end_ts" width="75px" formatter="secToHourMinSecMS">End</th>
      <th field="duration" width="75px" formatter="secToHourMinSecMS">Duration</th>
      <th cellType="dojox.grid.cells._Widget" widgetClass="dijit.form.HorizontalSlider" field="include" formatter="formatCurrency" constraint="{currency:'EUR'}" editable="true" width="10em" styles='text-align: right;'>Amount</th>
    </tr>
  </thead>
</table>

</body>
</html>

有什么我想念的吗。这似乎是基本的，但我似乎看不到它。

[编辑]

我所做的是使用格式化程序返回一个 dijit 小部件以返回一个小部件。因此，在声明性模型中，我指定如下内容：

<th field="type" formatter="getMultiField" width="10em" styles='text-align: center;'>Type</th>

然后我编写了一个如下所示的 JavaScript 函数来返回我想要的小部件。

function getMultiField(value) {
  var jsonValue = JSON.parse(value); //I provide the value of the widget as JSON
                                     //from my data store, so I need to parse it
  var control = new ocp.MultiStateCheckBox({ //my custom widget
    id : "dMSCB"+(new Date).getTime()+Math.ceil(Math.random()*100000), //generate a unique ID
    value : jsonValue.value,
    onChange : function (value {...}) //code to manipulate the underlying data store
  });
  return control; //The dojo 1.4 grid can handle a returned Widget
}
4

0 回答 0