Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Inquiry: tree cell with multiple embedded widgets

    We wish to have embedded widgets inside a single tree cell. To do so I use "createRecordComponent()" method which returns a field with combined widgets
    In the code below I create tree field made of isc.Label and isc.ImgButton. However, this is a concrete example with hardcoded widgets and source. I have difficulty figuring out how to bind widget to the source if widget can be named anything and its source can be any field in the record.
    Any advice?

    Thank you


    <HTML><HEAD><TITLE>Combined Fields Inquiry</TITLE>
    </HEAD>
    <body class="pageBackground" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scroll="no" style="overflow:hidden">
    <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
    <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    <SCRIPT SRC=isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
    <script>

    countryData = [
    { continent:"North America",
    countryName:"United States",
    countryCode:"US"},
    { continent:"Asia",
    countryName:"China",
    countryCode:"CH"},
    { continent:"Asia",
    countryName:"Japan",
    countryCode:"JA"},
    { continent:"Asia",
    countryName:"India",
    countryCode:"IN"},
    { continent:"Europe",
    countryName:"Germany",
    countryCode:"GM"},
    { continent:"Europe",
    countryName:"United Kingdom",
    countryCode:"UK"},
    { continent:"Europe",
    countryName:"France",
    countryCode:"FR"}
    ]


    isc.ListGrid.create({
    height: 200,
    showRecordComponents: true,
    showRecordComponentsByCell: true,
    canRemoveRecords: true,
    data: countryData,
    fields: [{ name: "iconField", title: "Comments/Stats", width: 100 }],

    createRecordComponent : function (record, colNum) {
    var fieldName = this.getFieldName(colNum);

    if (fieldName == "iconField") {
    var recordCanvas = isc.HLayout.create({
    height: 22,
    align: "center"
    });

    var flagImg = isc.ImgButton.create({
    src:"/isomorphic/system/reference/exampleImages/flags/16/" + record["countryCode"] + ".png",
    height: 16,
    width: 16
    });

    var countryLbl = isc.Label.create({
    contents: record["countryName"]
    });

    recordCanvas.addMember(flagImg);
    recordCanvas.addMember(countryLbl);
    return recordCanvas;
    }
    return null;
    }
    });


    </script>
    </BODY>
    </html>
    Tags: None
    #2
    Could you elaborate on what you're having trouble with? This code already shows creating a compound widget structure that depends on data in records - but that seems to be the same thing you're saying you don't understand..?

    Comment

      #3
      Yes, sure.
      Let's add another field "continent" to this tree (see new code below). The source of this field is automatically bound to the "continent" entry in tree data source.

      The question is: can I bind embedded cell elements in a similar manner?

      For example, if you replace
      var countryLbl = isc.Label.create({
      contents: record["countryName"]
      });

      with

      var countryLbl = isc.Label.create({
      name: "countryName"
      });

      the automatic binding based on name "countryName" does not apply.

      I could automatically generate string
      "contents: record["countryName"]" yet my problem is there is an extensive list of widget types that can be embedded into cell and I need to figure out what source setting property to use: "contents", "src", "value", etc.

      Is there any straightforward way to do so?

      thank you

      <HTML><HEAD><TITLE>Combined Fields Inquiry</TITLE>
      </HEAD>
      <body class="pageBackground" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scroll="no" style="overflow:hidden">
      <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
      <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
      <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
      <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
      <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
      <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
      <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
      <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
      <SCRIPT SRC=isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
      <script>

      countryData = [
      { continent:"North America",
      countryName:"United States",
      countryCode:"US"},
      { continent:"Asia",
      countryName:"China",
      countryCode:"CH"},
      { continent:"Asia",
      countryName:"Japan",
      countryCode:"JA"},
      { continent:"Asia",
      countryName:"India",
      countryCode:"IN"},
      { continent:"Europe",
      countryName:"Germany",
      countryCode:"GM"},
      { continent:"Europe",
      countryName:"United Kingdom",
      countryCode:"UK"},
      { continent:"Europe",
      countryName:"France",
      countryCode:"FR"}
      ]


      isc.ListGrid.create({
      height: 200,
      showRecordComponents: true,
      showRecordComponentsByCell: true,
      canRemoveRecords: true,
      data: countryData,
      fields: [{ name: "iconField", title: "Comments/Stats", width: 100 },{name:"continent", title:"Continent"}],

      createRecordComponent : function (record, colNum) {
      var fieldName = this.getFieldName(colNum);

      if (fieldName == "iconField") {
      var recordCanvas = isc.HLayout.create({
      height: 22,
      align: "center"
      });

      var flagImg = isc.ImgButton.create({
      src:"/isomorphic/system/reference/exampleImages/flags/16/" + record["countryCode"] + ".png",
      height: 16,
      width: 16
      });

      var countryLbl = isc.Label.create({
      contents: record["countryName"]
      });

      recordCanvas.addMember(flagImg);
      recordCanvas.addMember(countryLbl);
      return recordCanvas;
      }
      return null;
      }
      });


      </script>
      </BODY>
      </html>

      Comment

        #4
        createRecordComponent() gives you the ability to do this any way you'd like.

        If you'd like to invent a syntax for binding components like a Label to records, you can try doing so, and you could put these additional settings on the ListGridField and detect them from within createRecordComponent().

        It remains to be seen whether this will be any more compact or more clear than simply accessing the passed-in record object..

        Comment

        Previous template Next
        Working...
        X