Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    readonly selectItem

    I'd like to start implementing a custom canvas item which will either show a normal select item or a text field with no border if it is read-only.

    Up to this point, I have only made custom canvas items from canvas objects. This time I would like to avoid using a canvas object and just toggle between a selectItem and a staticTextItem. Is this possible? Or do I have to have a dynamic form with two fields in there and override setDisabled to have the show/hide logic?

    #2
    CanvasItem requires an actual Canvas instance.
    So you can have a canvasItem containing a DynamicForm with the two items which toggle, as you suggest. Or (depending on your implementation) you could possibly have 2 items on the form itself (a selectItem and a static-text item), and just show and hide at the form level when you want the field content to be editable or not.

    Comment


      #3
      OK.

      I have a very simple case where I used a dynamic form with two fields in my custom canvas item. Toggle between hide button and show button. You'll notice that there is a slight jump on the title. Is this expected? How do I fix this?

      Code:
      <HTML><HEAD><TITLE>AdvSelect</TITLE>
      <link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" />
          
      </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>
      isc.ClassFactory.defineClass("cwAdvancedReadOnlySelect", "CanvasItem");
      
      isc.cwAdvancedReadOnlySelect.addProperties({
      	init: function(){
      	   this.showTitle= false,
            this.canvas = 
       	       isc.DynamicForm.create({
       	    	   fields: [{name: "_cwSelC$"+this.ID, title: this.title, titleVAlign:"center",_constructor:"SelectItem"},{name:"_cwStaticC$"+this.ID, titleVAlign:"center",title: this.title, defaultValue:"TEST",_constructor: "TextItem", textBoxStyle: "cwNoBorder"}]
       	       });
      		this.enable = function(){
      			this.canvas.showItem("_cwSelC$"+this.ID);
      			this.canvas.hideItem("_cwStaticC$"+this.ID);
      		};
      		this.disable = function(){
      			this.canvas.hideItem("_cwSelC$"+this.ID);
      			this.canvas.showItem("_cwStaticC$"+this.ID);
      		};
              return this.Super("init", arguments);
      	}
      	
      });
      
      isc.DynamicForm.create({
      ID:"testForm",autoDraw:true,
      fields: [{_constructor: "cwAdvancedReadOnlySelect",ID:"testConst", title:"TESTTITLE"}]});
      
      isc.Button.create({
      top:200,title: "enable",
      click: function(){
      testConst.enable();
      }
      });
      
      isc.Button.create({
      top:200,left: 300, title: "disable",
      click: function(){
      testConst.disable();
      }
      });
      </script>
      </BODY>
      </html>
      style:
      Code:
      .cwNoBorder{
      	border: none;
      	font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; text-overflow:ellipsis;
          color:black;
      	background-color: inherit;
      }

      Comment


        #4
        I am trying to figure out the easiest way to do this, without having to completely separate it from what we currently have implemented for a normal SelectItem. With the current custom canvas item, I will have to copy over all properties we currently have customizable for a Select Item and set it in my embedded select item; properties such as picklistBaseStyle, valueMap, addUnknownValues, etc.

        Another thought is, with the custom canvas item, don't I end up with an extra canvas in my rendered page? We've tried to limit the amount of canvases for performance, and I would not be able to guarantee how many of these custom items will show in a given form.

        So I was thinking of maybe implementing this 'feature' by still creating a normal Select Item but also add a textItem which by default would be hidden (is this possible?) and will only be displayed when show/hide is called on the selectitem. Of course, I will need to make sure the textitem has set the same property value for at the last startRow,colSpan so that the dynamic form maintains the same layout regardless of which item is currently visible.

        Thoughts? This is probably going beyond the forum 'help' but thought I'd ask anyway

        Comment


          #5
          Ok. I seem to be making this harder for myself. I've decided to just render two selectItems. Exactly identical except one has canEdit set to false at construction, and showIf for this field will return true if its editable counterpart is set to disabled.

          Comment

          Working...
          X