In this article we'll consider frequently occurring situation, a particular case of different views presentation:
you have some view that contains a list of data. When you select an item - its details are presented in other view.
Shortly, our actions are the following:
dhx.ui({ container:"groupBox", rows:[{//we define 2 rows. The first one is 'toolbar' that contains view-changer:'tabbar' control. view:"toolbar", type:"BigTabBar",// specifies type of toolbar. "BigTabBar" was specially developed for 'tabbar' usage id:"topbar", // the id of the component which we'll use later data:[{ type:"tabbar", selected: 'tab_1',tabWidth:156, tabs: [ // the first view'll be selected initially {key:"tab_1", label:"List"}, // the tabs of the control. One for 'list' and the other for form {key:"tab_2", label:"Details"}] }] }, {// the second row contains our main component - 'multiview'. view:"multiview", cells:[{view:"list",// specifies 'list' component as the first view id:"tab_1",//please note, views' id must coincide with keys specified in view-changer (in our case,tabbar) datatype:"xml", // data type of loaded data template:"#name#", // specifies the represented data select:true, // defines whether list's items can be selected type: { width: 300 }// width of the list }, {view:"form", // specify 'form' component as the second view id:"tab_2", data:[{ type:"text", id:"name", label: 'Song', position: "label-left", align: "center", labelAlign: "center"},// defines simple text fields where we will present item's details {type:"text", id:"author", label: 'Singer', position: "label-left", align: "center", labelAlign: "center"}, {type:"text", id:"year", label: 'Year', position: "label-left", align: "center", labelAlign: "center"}, {type:"text", id:"album", label: 'Album', position: "label-left", align: "center", labelAlign: "center"}] } ]} ]});
$$("tab_1").load("xml/songs.xml", "xml", function(){// as data loading is asynchronous we'll load data to 'list' out of its definition to ensure initial selection $$("tab_1").select($$("tab_1").first());// makes the first row selected }); $$("topbar").attachEvent("onBeforeTabClick",function(button,id){// the event 'onBeforeTabClick' fires when a user is clicking on tabs of 'tabbar' control $$(id).show();// shows the appropriate tab of multiview (ids of 'tabbar' and 'multiview' tabs are coincide (tab_1, tab_2)). if (id=="tab_2"){//loads data of the appropriate item to form $$("tab_2").setValues( $$("tab_1").item($$("tab_1").getSelected())); } return true })
Used methods: