0

各タブにカスタム ウィジェットを配置する 2 つのタブバー (dojox.mobile.TabBarButton) があります。2 番目のタブでは、ウィジェットは datagrid を使用して JSON データを表示します。ここで私は問題に直面しました。データグリッドのデータは正しくロードされ、DOM ノードも形成されていますが、データグリッド自体は表示されていません。それでも、最初のタブに配置すると不思議に機能します。これが私のJSコードです。

var gridDataUrl = "gridData.json";
var params = {
    url: gridDataUrl,
    handleAs: "json"
};

var resultGridNode = this.resultGridNode;

dojo.xhrGet(params).then(function(response){
    var gridData = response;
    var data = {
        label: gridData.identifier,
        identifier: gridData.identifier,
        items: gridData.items
    };

    var store = new dojo.data.ItemFileReadStore({
        data: data
    });

    var dg = new dojox.grid.DataGrid({
        id: "grid",
        store: store,
        structure: gridData.structure
    }, resultGridNode);

    dg.resize();
    dg.startup();
});

カスタム テンプレート:

<div data-dojo-type="dijit.layout.BorderContainer" style="width: 100%; height: 100%">
    <div data-dojo-attach-point="resultGridNode" style="height: 600px; width: 400px">
    </div>
</div>

ウィジェットをアタッチした親テンプレート:

<div id="tabView1" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true" style="height: 100%;">
    <h1 data-dojo-type="dojox.mobile.Heading">Result</h1>
    <div data-dojo-type="dojox.mobile.RoundRect" style="height: 100%" class="mblRoundRect">
        <div data-dojo-attach-point="resultgrid"></div>
    </div>
</div>

デバッグ後、問題はビューからのサイズ変更方法である可能性があることがわかりました。データグリッドが選択解除されたタブバーに配置されると、幅と高さが 0 に設定されます。resize メソッドを明示的に呼び出しても効果はありません。誰でも私に手がかりを与えることができますか？

4

1 に答える 1

0

タブバーとは何dijit.layout.TabContainerですか？

グリッドがなぜdijit.layout.BorderContainerですか？BorderContainerすべての親domノードの高さが100％でない限り、高さが100％のaを使用しても機能しません。私はそれを削除して、それが機能するかどうかを確認します。

于 2012-06-21T14:57:25.150 に答える