CODEWITHSUNDEEP
htmlextjs
zuriosam
zuriosam

Reputation: 115

How to link extjs component to html link

With sencha cmd application is automatically generated and the logic is that given view is set as the main view. There is also automatically generated index.html as start page which loads components and everything is done automatically within MVC architecture. But is there a way to have some custom HTML page as start page and then to call extjs components from html links? For example, if there is a html page like:

index.html

<!DOCTYPE html>
<html>
<body>

<div class="topnav">
  <a href="#login">Login</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>The start up application page</h2>
  <p>Some content..</p>
</div>

</body>
</html>

how can I use this html as start page and then by clicking on login to open my extjs login class? Why would I do it? Simply, because there are much more free web templates that can be used as main application core. Or maybe this is not how modern extjs web applications work?!

One way that I see as possible solution is to create a main panel (in extjs) that will be defined as mainview, and then load the external html code into it. But then again, the question still remains: how can login panel be opened by clicking on that <a href="#login">Login</a> link?

Actually, I've tried that. So, in my working application, I loaded index1.html code into panel and added:

<a href="#login" onclick="myFunction()">Login</a> and then

<script>
function myFunction() {
  Ext.widget('login').center();
}
</script>

Everything looked promising, but, on clicking login href, I got an error that Ext is not defined:

enter image description here

Upvotes: 0

Views: 585

Answers (1)

mcg1103
mcg1103

Reputation: 688

When I have experimented with this I had to call the microloader.

<script id="microloader" data-app="61f95994-076b-4a7a-yyyy-xxxxxxx" type="text/javascript" src="/workspace/apps/webUtils/bootstrap.js"></script>

The path to the bootstrap.js would be different for development or production.

Also:

Sencha has Ext Web Components https://www.sencha.com/products/extwebcomponents/

And also toolkits for Angular and React. https://www.sencha.com/products/

Upvotes: 1

Related Questions