I have an extjs application which I embed into an existing HTML template with js plugins/css etc.
Im having CSS conflicts between my template styles and ext's. As a simple solution im wondering whether I can tell ext to only use its own css file when creating its components. I've implemented the following setting before I load my application:
Ext = {
buildSettings:{
"scopeResetCSS": true // Thanks, but I'll do my own scoping please
}
};
Which works to some degree, but the plugins css files are overriding certain ext components (form fields, alignment issues etc).
This is the first time i've tried integrating an ext application into a html template so my knowledge is pretty limited.
Thanks in advance
As far as I know, there is no way to scope CSS in a single page, I wonder how you did it. If you want to avoid conflicts, I'm afraid that you'll have to do some refactoring.
Some advices :
Build your CSS rules with the ExtJS file loaded in the page, which means that you are currently working with the final environnement. Moreover, you can use their own reset rules.
Do not use tag selectors (div, span, input...) - which apply to every element in your page including ExtJS ones - unless the targeted element never host any ExtJS component.
Add a namespace to your own selectors (#my-id, .my-class) as ExtJS does (.x-button, .x-container).
Another solution would be to sandbox ExtJS with iframes, but it depends on the nature of your project. I don't have enough informations to help you more than that.
Related
I want to download one of the free bootstrap templates and add said template to my react app. I tried reading some of the documents but I can't find any documentation on integrating these free templates with react.
I did an npm install for the template I liked but I'm not sure what to do next. I just have the template in my node_modules directory.
I took what was in the body of the html file in the template and threw it in the return for my app.js. Added the css and vendor folder. Then I tried to import the templates css file to my app.js as well as change what was needed in my index.html file. Some of it worked. Other parts didn't.
Just looking to properly integrate these nice looking templates into my react projects.
Any help would be greatly appreciated!
The issue is these templates are built with Bootstrap in mind not React. These templates were created using regular HTML, CSS, JS, jQuery, etc.. and won't work out of the box for a React application. So in order to get one of these templates to work, within the context of React, one will have make manual changes to numerous parts of said template.
For example, in addition to grabbing the pieces of the template desired for your React application one will have to change numerous attributes listed within the HTML pages provided by the template. This is because in React you can't use keywords reserved for JavaScript in JSX.
So what does this mean?
You'll have to change the class attributes in the HTML to className for your CSS style rules to take effect from the template. onchange becomes onChange, onsubmit becomes onSubmit, etc...
The standard is to camelCase reserved JavaScript keywords in JSX.
You can definitely get this template to work in React it will just involve some manual tweaking on your end. However, if you want a template to work out of the box for React I would look into a free template built with React in mind.
Hopefully that helps!
AngularJS 1.4.x is used on my current project. I have to implement tabs section on page. Is it ok to use Bootstrap's JS Tab or I should move to AngularJS based solution, for example UI-Bootstrap or custom tab library?
I think it is totally ok to use Bootstrap JS tab, but as usual angular developers are also divided into two camps, one who want to do everything in angular way(like creating directives or use UI-Bootstrap directives/components), even when it is a very small task and another who wants to mix jquery/bootstrap library with angular and choose one or another depending on the need.
Angular-UI, will also use the same bootstrap library, but you will get an angularized wrapper over it.
My suggestion, use whatever you are comfortable with and don't bind yourself to one opinion or another.
I'm adapting one angular 1 project to use the webpack module bundle system. Almost everything is working as expected, but one material component doesnt get applied well. It is the md-input-container.
What I think it is the cause of the problem: I'm using ng-cache-loader to load the html templates. So, I think, in someway the tags are not processed or so. Because I put the md-input-container in the main index.html (which is not loaded by ng-cache-loader) and it works.
Also, I'm using lazy loading of modules and states with ocLazyLoad and ui-router-extras future state, maybe this has something to do with the problem...
At first I thought it was only css problems, but I have confirmed its not.
(Posted on behalf of the OP).
This weird fix solved the problem.
I'm a beginner in AngularJs and I have a simple question: How do I change pages in AngularJS?
Not using router (ng-view) in AngularJS since I need a new html page where there's no common templates. I tried to use "ng-href" but it doesn't work well, since the system works under requireJS and the new html doesnt contain any js or css that I need. (except I force to add them..)
Does anyone has got some idea?
you can achieve with some template engine like "Swig" http://paularmstrong.github.io/swig/ with has a layout template were you base js and css and you can extend it.
I have a problem related to Wicket and Ext JS. I have a text field in Ext JS and I want to add a Wicket ID to it. In Ext JS, text fields have limited properties. How can I do this?
There are at least two projects trying to integrate ext js into wicket:
http://code.google.com/p/wicket-extjs-integration/ gpl :(
http://code.google.com/p/wicket-ext/ apache license :)
You'll have to use the DOM to add custom attributes to the markup. See Ext.Element.
If you want to add a wicket:id then I presume that you are wanting to add a wicket component with that wicket:id to your page / component. For this to work that wicket:id will need to be present in the html for your page / component at render time. Therefore adding it to the DOM with javascript wont help you as wicket will never see it.
There are a few ext-js wicket integrations which may help you, but I haven't used them. Try searching on the wicket mail list: http://old.nabble.com/Apache-Wicket-f13974.html
The wicket-extjs-integration project is now available under the Apache license. Licensing is a tricky subject, however, due to the fact that ExtJS code itself is GPL. For details, see http://code.google.com/p/wicket-extjs-integration/wiki/Licensing.
The way we (Hippo) use it mostly is by letting the wicket component
set up the configuration and
implement component-bound services for the Ext component;
e.g. a read/write JsonStore can be implemented in pure java.
It's also easy to subscribe to Ext events with a (java) event listener.
Typically, the Wicket component only needs to bootstrap the Ext component. However, we've also had a few cases where we then needed to wrap a Wicket component in an Ext component. This is also quite easily accomplished. (see our Channel Manager code # http://svn.onehippo.org/repos/hippo/hippo-cms7/addons/addon-channel-manager/trunk/)
Being able to compose the Ext component hierarchy has allowed us to extend our Wicket-based plugin mechanism to the Ext side. E.g. Wicket plugins each instantiate a card/panel Ext component & those are aggregated on the wicket side in a component that instantiates an Ext tab panel.
The method annotation you mention is something we haven't needed; we typically trigger client-side code by emitting javascript code. Probably a cleaner solution would be to fire an event.
The versions of Wicket and ExtJS used are a bit antiquated (1.4.xx & 3.4.x), something we'll be addressing on a short term.