dojox DataGrid 中小部件的问题

发布于 2024-08-23 10:52:11 字数 4160 浏览 3 评论 0原文

我试图在我的 dojox.grid.DataGrid 中包含一些编辑小部件，但似乎遇到了很多困难。我已经尝试了一切我能想到的让它发挥作用的方法，但有些事情就是不太顺利。当我开始遇到问题时，我尝试几乎完全从

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

原文

I am trying to include some editing Widgets in my dojox.grid.DataGrid seem to be having a lot of difficulty. I have tried everything I can think of to get it to work, but something just isn't going right. When I started having problems, I tried to copy almost exactly from the grid tests and model my "breakout" of code just like that, but without success. Basic editing of the Grid seems to work. In the example below, the "Events" column allows edits, but the two columns that are using the cellType attribute don't work. In fact they also seem to ignore the other attributes (like the styles) which would seem to indicate that some sort of issue was run into, but there is nothing in FireBug. Also I get the same behaviour between Chrome and 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>

Is there anything that I am missing. It would seem to be fundamental, but I just can't seem to see it.

[EDIT]

What I have done instead is return a dijit Widget using the formatter to return a widget. So in the declarative model, I specify something like this:

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

And then I wrote a JavaScript function like the below to return the widget I wanted.

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
}

分享到QQ

分享到微博