I am trying to find examples of how to wrap ExtJs and ExtJs 'modules' up for use with a javascript dependency framework such as RequireJS or LAB.
I am working with a large ExtJs based project and there are many separate module files which are just bulk included everywhere and it is getting a little out of control.
Has anyone used an existing depenency management framework with ExtJs? (I know ExtJs 4 may include something similar, but I am fixed on using ExtJs 3)
I wrote my own dependency utility (well my boss wrote it as a method for another framework we are building, and I just ported it to ExtJS) as a mixin where you can just define what your dependencies are, and include events for when they are loaded.
Using Grunt
https://github.com/mattgoldspink/grunt-sencha-dependencies
Sencha Cmd now does it automatically as well - unfortunately it considers ExtJS4.1 as legacy, let alone 3.
Related
I am currently working in AngularJS 1.2 application, it is a medium size application with 25 modules, now I want to upgrade to angular new version. I can't write freshly because it is an old project, I don't know older requirements of this project. Please any one suggest me the best way to achieve it.
Its not that easy to convert a angular-1 project to Angular-2+. You must need a fresh start, because both the framework is totally different. For project requirement/ business logic, you must understand the logic and the code and then write a fresh code in Angular-2+.
You may copy and paste any javascript code from angular-1 to angular-2+. It will work properly.
This page helped me a lot when I upgraded to angular: https://angular.io/guide/upgrade
A very good handbook for upgrading to angular is: https://angular.io/guide/ajs-quick-reference
A good solution would be to use ngUpgrade: run both AngularJS and Angular at the same time. All Angular code is running in the Angular framework, and AngularJS code in the AngularJS framework.
What happens on top of this is that components and services managed by one framework can interoperate with those from the other framework. This happens in three main areas: Dependency injection, the DOM, and change detection.
Some main things to take into consideration when upgrading:
- Get AngularJS and Angular components and services talking to each other during the upgrade
- Replacing controllers
- Replacing $scope and $watch
- convert directives to components
I want to create a popup using angularjs in Extjs Page.This is my current situation.I have manually bootstrapped angular link when they click.now the issue is ext-all.css and bootstrap.css files are conflicting.So How can i avoid this conflict.Can any one suggest idea?any conflict arise in js file if its in same page? Lot of thanks in advance
AngularJS + ExtJS - another question in stackoverflow read this before considering to combine both.
I have tried doing it for my websites for curiosity's sake but it creates more problems then it solves. I would strongly recommend sticking to one framework.
You can combine Jquery and ExtJS without problems because they do not have any conflicting elements.
Your conflict probably arises from the same naming and calling that might or might not exist within the libraries of these two frameworks. The way I see to fix it would be to go within a library and start solving the conflicts. That will be very tedious to say the least.
I wouldn't really mix these frameworks together in a single project. ExtJs is a fully fledged component based framework which should provide most, if not all the functionality that you need. If you are missing something then you should look at the Sencha forums section on user plugins and extensions or even build it yourself.
ExtJs provides most, if not all of the functionality of AngularJs already but adds visual components such as grids, forms, windows, treepanels etc. If your using Ext already for your project you should really stick by it. Adding another framework adds complexity and additional libraries to download, increasing load times etc.
I'm updating my project from Ext3.3 to Ext4.
I have added the ext3-core-compat.js and ext3-compat.js files after added the new ext4 ext-all-debug.js file.
I am getting a members is udefined error on line 3262 of ext-all-debug.js.
Which is inside the Ext.extend method which accepts 3 parameters:
Ext.extend = function(subclass, superclass, members)
i can see from the ExtJs4 documentation that Ext.extend is deprecated, however I just want to get my code working before I change all of my Ext.extend to Ext.define.
Any help guys?
I assume that you're using the anonymous constructor syntax, like this?
MyClass = function(config) {
...
}
Ext.extend(MyClass, SomeOtherClass, {
...
});
If so, this form cannot be detected by Ext4 or the compat layer and must be updated manually to the new standard Ext.define syntax. I'm not sure if this is currently mentioned in the migration documentation, and if not I'll add it.
Assuming that you have followed the steps in the ExtJS 3 to 4 migration guide, I don't think that there is much else that can be done other than to manually go through your application and make the changes. According to Sencha's blog post on the migration (emphasis mine):
Ext JS 3 Compatibility Layer
This consists of a set of files that, when included after Ext JS 4, provide overrides that will bootstrap existing Ext JS 3 code to run under Ext JS 4. The goal of this layer is not to enable your application to run unmodified under Ext JS 4 long-term. On the contrary, you should expect to use this layer only as a temporary means of migrating fully to Ext JS 4. The purpose of providing it is to help make the transition as swift and painless as possible. Rather than debugging obscure errors from a blank screen, you will be able to get your application back into a rendered and functional state much more quickly using the compatibility layer, making it dramatically easier to start migrating to the latest architecture.
Im trying to use ExtJS FormPanel with JSF 2.0 + MyFaces 2.0.4. ExtJS is a great JavaScript framework at all. But it doesnt use DOM of Page. So the main problem starts with here. To put JSF beans in work i must put h:form tag inside the XHTML(or handle viewstate) since it must synchronize with ViewState.
But ExtJS doesnt aware of THE ViewState. How can i make ExtJS aware of THE ViewState and synchronize at all. I wish to put it in FormPanel....items:[{.....}]. But couldnt find any way.
And one more thing; There may be two or more form on a single page. If i cant put it in ExtJS items[{...}] how can i do each forms management.
Thank you.
I've used both of these frameworks pretty extensively, and I think you're barking up the wrong tree here. By the time you figure out how to couple these into the JSF lifecycle, I think you could have written the REST resources on your server with that Ext could consume.
Or if you are sticking with JSF, you could try Primefaces or one of the many other JSF component libraries if you're looking for some snazzy data grids. They aren't as nice as Extjs, but if you are a JSF shop it is worth looking into.
There's also Ext GWT, which has nothing to do with JSF of course, but I've never used that.
ExtJS have "adapter" for working with other javascript libraries. But why? Why not just use Ext Core?
UPDATE:
I know it was designed for YUI. But why it need an adapter?
ExtJs use ExtJs namespace, almost all other framework
use $, they should never conflict.
jQuery can work with others without any adapter. Why Extjs need it?
Is there any extra functionality provided by these adapters?
Am I missing anything?
I know there are some people here that were part of the early ExtJS Team so they probably will have a better answer, but basically ExtJS started as an extension to YUI where it was using the YUI Library to create a set of components to use.
Then it was modified using the adapter design pattern to support people that were already using jQuery or Prototype which had a few advantages: Fewer JavaScript to load on the page (if you already used jQuery you didn't need to load the YUI library) and let coders re-use their existing skills.
I can only assume that as the set of Components evolved it became easier to write a core adapter written in an optimized way for the ExtJS set of Components, and not rely on an external library for bug fixing, etc.
I would add that personally, I feel much more comfortable using the Ext Core as the adapter even though I prefer jQuery for a lot of DOM manipulations, but I think there are less chances of facing bugs while using the components if the base adapter is Ext Core.
UPDATE -
Based on your updated question, I think what you are missing is the separation from Ext Core and ExtJS.
ExtJS - A library of JavaScript Components (mainly UI but also Data classes, themes, etc.) that allows to build Rich Internet Application.
Ext Core - A cross-browser javascript library used to enhance web pages with dynamic changes (some Dom Querying, Dom traversal/manipulation, Ajax requests, etc.)
If you want to make the comparison into the jQuery world, Ext Core = jQuery and ExtJS = jQueryUI.
Now with jQueryUI, you NEED the jQuery library with it, because jQueryUI is built on TOP of jQuery.
With ExtJS, because it was built on top of YUI originally even before Ext Core existed, you can if you want use ExtJS WITHOUT Ext Core, but with the jQuery or YUI adapter for example.
You CANNOT ust ExtJS on it's own without any of the adapters, just like you can't use jQueryUI without jQuery.
I hope this answer your question.
ExtJS used to be built on top of YUI, so there were adapters created for operating with other libraries as well. I think as of version 1.1, ExtJS became a standalone framework, so these adapters are now optional. I think the adapters are now for people who are more comfortable with the basic frameworks of the other libraries, but want to use certain components of the ExtJS library (Ext's greatest strength is their UI widget toolkit, IMHO).
Take a look at this SO question too:
Is jQuery compatible with ExtJS?