dojox.grid.datagrid - Dojo TabContainer doesn't get formatted correctly until after I do an Inspect Element -
i have dojo datagrid few rows of data. when click on row, have tabcontainer created in <div>
. here's ends looking like:
the formatting tabcontainer incorrect. however, after "inspect element", formatting corrects itself:
however, submit button disappears after formatting corrected.
here's code use create datagrid , tabcontainer:
<div id="r_body"> <div id="r_list"> </div> <div id="r_form"> <div data-dojo-type="dijit/form/form" id="parameters_form" data-dojo-id="parameters_form" enctype="multipart/form-data" action="" method=""> {% csrf_token %} <div> <div id="r_tab_container"></div> </div> <div> <p></p> <button id="submit_parameters" dojotype="dijit/form/button" type="submit" name="submitbutton" value="submit"> submit </button> </div> </div> </div> </div> <script type="text/javascript"> require([ "dijit/layout/bordercontainer", "dijit/layout/contentpane", "dojox/grid/datagrid" , "dojo/data/itemfilewritestore" , "dojo/dom", "dojo/domready!" ], function(bordercontainer, contentpane, datagrid, itemfilewritestore, dom){ // create bordercontainer top widget in hierarchy var bc = new bordercontainer({ style: "height: 500px; width: 230px;" }, "r_list"); /*set data store*/ var data = { identifier: "id", items: [] }; data.items.push({ id: 'some_id', description: 'some_description', var store = new itemfilewritestore({data: data}); /*set layout*/ var layout = [[ {'name': 'title', 'field': 'description', 'width': '200px', 'noresize': true} ]]; /*create new grid*/ var r_list_grid = new datagrid({ region: "left", id: 'r_list_grid', store: store, structure: layout, rowselector: '0px' }); bc.addchild(rt_list_grid); bc.startup(); list_grid.on("rowclick", gridrowclick); function gridrowclick(evt){ var idx = evt.rowindex; var rowdata = list_grid.getitem(idx); var r_url = rowdata['url'][0]; var r_id = rowdata['id'][0] require(["dojo/dom", "dojo/request/xhr", "dojo/dom-form", "dijit/layout/tabcontainer", "dijit/layout/contentpane", "dojo/ready", "dojo/domready!"], function(dom, xhr, domform, tabcontainer, contentpane, ready){ var url = window.location.pathname + "dev/" + r_id + "/" + r_url + "/"; xhr(url, { method: "get" }).then( function(response){ var json_response = json.parse(response); var fields_dict = json_response['fields_dict']; var tc = new tabcontainer({ style: "height: 100%; width: 100%;" }, "r_tab_container"); for(var key in fields_dict) { var content_string = ''; var fields = fields_dict[key]; for(var field in fields) content_string += '<div>' + field + '</div>'; var tcp = new contentpane({ title: key, content: content_string }); tc.addchild(tcp); } tc.startup(); }, function(error){ //error stuff } ); }); } }); </script>
so what's going here , how fix tabcontainer formatting? thanks!
i had tc.resize();
after tc.startup();
Comments
Post a Comment