[CLOSED] Creating a c# component that generates a JavaScript class

[PLoch]

Hello:

My message is related to this post: http://forums.ext.net/showthread.php...a-custom-class

I want to do the same but I am fuzzy about how the code generation is done on the client, and I was wondering if you have some samples at this time.

Just to give you an example, I want to develop an ext.net control that would generate this kind of code:

Ext.ns('MyNameSpace');

MyNameSpace.Controllers.ListController = Ext.extend(Object, {

  INSERT: 0,
  UPDATE: 1,
  NONE: -1,
  ui: null,
  applicationsStore: null,

  getUi: function()
  {
    if (this.ui == null)
    {
      this.ui = new Ext.Panel(...)  // <- Here I would like to insert some javascript code that is the result of rendering a Panel created in C# code. How would I achieve this?
    }
  },
  // This event gets fired before the onApplicationsStore is refreshed
  onApplicationsStoreBeforeLoad: function (store, options)
  {
    // Disable the add/remove buttons
    this.enableOrDisableApplicationsButtons(false);
  },

 getApplicationsStore: function()
 {
   if (this.applicationsStore == null)
  {
    this.applicationsStore = new Ext.data.Store(...) // Same here as above, I would like to insert the code that is generated from the store C# object
  }
 },
});

My JavaScript controller class is a component that glues the ui and all the actions together.

Thanks

[Daniil]

Hi,

Not sure that I understand your question.

Just to clarify:

1. At the first of all - creating a JavaScript class.
2. Then creating a C# wrapper class which will create an instance of that JavaScript class.

If you need any properties which you'd like to render to client side config, please override the ConfigOptions property.

[PLoch]

Sorry for not being clear enough.

1. Yes. I want to generate a JavaScript class that looks like the one in my original message
2. Yes. I want to create a C# component/control that would generate the JavaScript code that will handle the client (when I say client I mean the things that happen in the browser) events in addition to the UI (when I say UI I mean the extjs ui component - which in most cases it's going to be a panel or a viewport with controls inside).

I am also interested to know if I can insert the code that gets generated for an ui component into this script, that is can I insert the code that creates a panel for instance in the line with this.ui = <insert the creation code here>.

 getUi: function()
  {
    if (this.ui == null)
    {
      this.ui = new Ext.Panel(...)  // <- Here I would like to insert some javascript code that is the result of rendering a Panel created in C# code. How would I achieve this?
    }
  },

Thanks

[Daniil]

1. Yes. I want to generate a JavaScript class that looks like the one in my original message
2. Yes. I want to create a C# component/control that would generate the JavaScript code that will handle the client (when I say client I mean the things that happen in the browser) events in addition to the UI (when I say UI I mean the extjs ui component - which in most cases it's going to be a panel or a viewport with controls inside).[/CODE]

I'm still not sure what you mean by "generate a JavaScript class". Would you like to generate JavaScript scripts on server side and then render them?

Just to clarify.

All of C# Ext.Net widget controls are wrapper of respective ExtJS or Ext.Net JavaScript classes.

C# Ext.Net widget control produces a client side config

For example, the following <ext:Panel>:

<ext:Panel 
    ID="Panel1" 
    runat="server" 
    Width="200" 
    Height="200" />

produces something like this JS script:

new Ext.Panel({
  id : "Panel1",
  renderTo : "Panel1_Container",
  height : 200,
  width : 200
});

I am also interested to know if I can insert the code that gets generated for an ui component into this script, that is can I insert the code that creates a panel for instance in the line with this.ui = <insert the creation code here>.

 getUi: function()
  {
    if (this.ui == null)
    {
      this.ui = new Ext.Panel(...)  // <- Here I would like to insert  some javascript code that is the result of rendering a Panel created in  C# code. How would I achieve this?
    }
  },

I guess that you need to implement a respective server side property (name, for example, UI) and add it to the ConfigOptions property.

[PLoch]

I'm still not sure what you mean by "generate a JavaScript class". Would you like to generate JavaScript scripts on server side and then render them?

That's exactly right. I want the result of rendering my C# component to be my JavaScript class.

For example, the following <ext:Panel>:

<ext:Panel 
    ID="Panel1" 
    runat="server" 
    Width="200" 
    Height="200" />

produces something like this JS script:

new Ext.Panel({
  id : "Panel1",
  renderTo : "Panel1_Container",
  height : 200,
  width : 200
});

Yes, acknowledged. And one my questions was whether there is a way to get may hands on the result of rendering the UI, i.e. a call a function to 'render' the panel and get the string that represents the result of rendering the panel:

new Ext.Panel({
  id : "Panel1",
  renderTo : "Panel1_Container",
  height : 200,
  width : 200
});

and insert it wherever I want.

I guess that you need to implement a respective server side property (name, for example, UI) and add it to the ConfigOptions property.

Do you have a sample?

Thank you

[Daniil]

That's exactly right. I want the result of rendering my C# component to be my JavaScript class.

Well, you can build any JS script (using, for example, StringBuilder) and register it using the ResourceManagers' .RegisterClientScriptBlock() method.

Yes, acknowledged. And one my questions was whether there is a way to get may hands on the result of rendering the UI, i.e. a call a function to 'render' the panel and get the string that represents the result of rendering the panel:

and insert it wherever I want.

Maybe you could use BeforeRender, Render or AfterRender events which are presented almost in all widgets.

Do you have a sample?

Well, any Ext.Net C# widget control is an example. You can consider, for example, the Ext.Net.Panel class.

P.S. Not sure we can help further, because we are still not sure what exactly you are trying to achieve.

It would be best to provide us with some working sample(-s) which demonstrates the issue/requirement.

[PLoch]

In case someone else needs this, I found this code in the ext.net.mvc source code that allows you to get a handle on the string that represents the result of rendering a control:

From PartialViewRenderer.cs

 string wScript = DefaultScriptBuilder.Create(p).Build(RenderMode.RenderTo, ct, null, true, true);

p is a Panel object and ct is a unique string.

PS. You can close the thread. Thank you

[Daniil]

You can be also interested in the .ToConfig() and .ToScript() methods.

Ext.Net.Panel p = new Ext.Net.Panel();
string config = p.ToConfig();
string script = p.ToScipt();