Show cool things you have done with our products


Post by harshads »

Hello,

I need to run this Gantt component in a widget. The problem is the widget infra only accepts jquery object or HTML code to render as parameters in the api.

Is there any way in which I can extract HTML from the gantt object we create from var g = Ext.create();
example g.getHTML(); something like this.

Code snippet.
var gantt = Ext.create();
var myObj = {
			html: function() { return jQuery('<div id="'+ this.getId() +'"></div>');},
			getId: function() { return "dsTL_" + new Date().getTime()},
			draw: function() {
				var control = this.html();
            //here I need to pass the HTML
				control.append(gantt.HTML());
				return control ;
			}
	};

return myObj;
If I pass gantt object as is it does not work like below.
var gantt = Ext.create();
var myObj = {
			html: function() { return jQuery('<div id="'+ this.getId() +'"></div>');},
			getId: function() { return "dsTL_" + new Date().getTime()},
			draw: function() {
				var control = this.html();
            //here I need to pass the HTML
				control.append(gantt);
				return control ;
			}
	};

return myObj;

Post by nickolay »

No, it does not work like that. You can render it inside of some other element with "renderTo" config or "render" method though.

Post by harshads »

Hi thanks for the response.

Can you please elaborate your point with some code example?

Post by nickolay »

Yw. I'll elaborate with links to the documentation: https://docs.sencha.com/extjs/4.2.2/#!/a ... g-renderTo

https://docs.sencha.com/extjs/4.2.2/#!/a ... hod-render

Do some experiments with plain ExtJS panels first and then do the same for Gantt.

Post by harshads »

Hi Nickolay,

Appreciate your response. I am actually a new bee in this technology and it would be very helpful if you could give me some tips on how to invoke the APIs you mentioned.

A sample 2 line code will help a lot.

Post by mats »

The problem is the widget infra only accepts jquery object or HTML code to render as parameters in the api.
What do you mean by this? All you need to do is to have a DIV with some 'id' and render our component into it.

Post by harshads »

Thanks Matt.

It worked for me. Somehow the Gantt has become non interactive but I ll find out whats the problem.

One more thing left is getting the data via JSON object within the .js
At the moment I am getting data from a different file, I know its really perfect but I want the data to be coming from a javascript variable in the same script.

Like below example.
var taskData = "JSON data";
				
var taskStore = Ext.create("Gnt.data.TaskStore", {
		model : 'MyTaskModel',
		proxy : taskData
		});

Is there any simple way to do it?

Post by nickolay »

Yes, check our "buffered" example, there we load generate data.

Post by harshads »

Thanks :)

Post by harshads »

Hi Matt/Nickolay,

It turns out that for Bryntum Gantt to load in the widget I need the Javascript object to be returned. Earlier when I simply wrote all the code from the example in the draw method of the widget instead of rendering the gantt via the draw method it simply rendered the Gantt on its own. This made the Gantt to be readonly and non interactive as the div in which gantt loads is in the background of the the main div where the widgets draw method loads the widget contents (its my guess).

All I need to know now is how can I get the Bryntum Gantt in the Javascript object? Which API actually creates the Gantt which can be captured into javascript variable which I can return from the widgets draw method.

Thanks in advance.

Post Reply