代码之家 › 专栏 › 技术社区 › Kitson

dojox DataGrid中的小部件问题

dojox.grid dojo

2

Kitson · 技术社区 · 15 年前

dojox.grid.DataGrid 似乎有很多困难。我已经想尽一切办法让它发挥作用,但有些事情就是不对劲。当我开始遇到问题时,我几乎完全按照 grid tests 然后像那样对我的代码“突破”进行建模,但没有成功。对网格的基本编辑似乎有效。在下面的示例中,“事件”列允许编辑,但使用 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>

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
}

0 回复 | 直到 15 年前