Question

我试图在我的dojox.grid.DataGrid中包含一些编辑小部件似乎有很多困难。我已经尝试了一切我能想到的东西让它发挥作用，但有些事情是不对的。当我开始遇到问题时，我试图几乎完全从grid tests复制并模拟我的“突破”代码，但没有成功。 Grid的基本编辑似乎有效。在下面的示例中，“事件”列允许编辑，但使用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>

有什么我想念的吗？这似乎是根本性的，但我似乎无法看到它。

[编辑]

我所做的是使用formatter返回一个dijit Widget来返回一个小部件。所以在声明模型中，我指定了这样的东西：

<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
}

dojox DataGrid中小部件的问题

0 个答案: