I am new to Extjs. I am using Extjs 4 in my project. When the ext-all.js is loaded it automatically adds classes to the <body> tag. and all my other css styles are changed with extjs styles. I found in the documentaion that to set Ext.scopeResetCSS property to true, so I add like below.
Ext.onReady(function(){
new Ext.Component({
scopeResetCSS: true
});
});
but it doesn't change any thing. I still have the same problem.
Is there any way to stop extjs from automatically adding css classes to the tags? Please help..
This is my code to generate a multi line message box.
<link rel="stylesheet" type="text/css" href="components/com_jobs/js/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="components/com_jobs/js/extjs/ext-all.js"></script>
<!-- extjs message box code -->
<script type="text/javascript">
Ext.require([
'Ext.window.MessageBox'
]);
function removeBid(bidid){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
//fn: showResultText
});
}
</script>
Am I doing anything wrong??? I want extjs to style only its own components. But now extjs styles are effects my whole page.. Please help.
Thanks.
The scopeResetCSS property is part of Ext.buildSettings, which is used at the beginning of the Ext JS initialization sequence. If you want to change it, you have to edit ext-all.js or change the settings in the Sencha JS Builder (which I'm assuming you're not using).
Open ext-all.js in your favorite text editor (one that can handle larger files, preferably) and search for "scopeResetCSS" near the beginning of the file, and you'll find it easy enough.
If you are using ExtJS 4.0.2a, then set the scopeResetCSS BEFORE the include.
However, I just switched to ExtJS 4.0.7 and the issue is back. :(
I asked a similar question for ExtJS 4.2.1 before coming across this one. The solution I adopted was to modify the DOM once ExtJS was loaded, and add a listener for the DOMNodeInserted event to watch for and handle the automatic creation of ExtJS components like pick lists. If you are interested you can find my answer here: https://stackoverflow.com/a/29934347/857209
Related
Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0
Is there anyway to change the caption of the upload button from "UPLOAD FILES" to whatever is required?
Thanks a lot in advance
Initial reply - for basic Vaadin
As per the docs you can use upload.setButtonCaption("My custom caption");. Am I missing something?
Later update - for Vaadin elements
In this case you can use its i18n localization property. Unfortunately, for me the suggestion in the book to change a certain part with
document.querySelector('vaadin-upload#en').i18n.addFiles.many = 'Add Files;
did not work. However,
document.querySelector('vaadin-upload#en').set('i18n.addFiles.many', 'Add Files');
as seen in their github samples seems to work just fine. Below a sample and screenshot
<body>
<vaadin-upload id="en"></vaadin-upload>
<script>
document.querySelector('vaadin-upload#en').set('i18n.addFiles.many', 'Add Files');
</script>
</body>
Result:
I'm exploring Electron and I've run into a roadblock. I can't figure out how to load the Dojo Toolkit and use it in Electron.
For example, here is the simple "Hello World" for Dojo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
That works fine in a browser, but doesn't work at all in Electron. After a couple hours of googling and trying 50 different experiments I've gotten nowhere.
Can someone please enlighten me?
While you can disable node-integration as Shwany said, I believe that will effectively render the ipc modules useless, which will probably pose undesirable limitations since you won't be able to communicate between the main and renderer processes.
However, it is possible, with a bit of finagling, to get Dojo to play nice with Electron. There are only a couple of things you need to do in your entry page.
Firstly, force the host-node has feature to false. This can be done by setting it in dojoConfig.has, e.g.:
var dojoConfig = {
async: true,
has: {
'host-node': false
}
}
Secondly, as Shwany pointed out, Dojo is going to see the already-existing require, so we need to move that out before loading Dojo:
// Move Electron's require out before loading Dojo
window.electronRequire = require;
delete window.require;
After loading dojo.js, you can move Dojo's require elsewhere and move Electron's back, if you wish. Whether you want to do this may depend on how you intend to code the client side of your application. Ostensibly, Dojo's global require is never needed, since you can request a context-sensitive require in any defined module via the 'require' module ID.
If you want to see a scaffolded Electron application incorporating Dojo, I created a boilerplate a few weeks ago (though be advised it's currently relying on a fork of electron-packager). If you want to see an example of a more full-blown Electron/Dojo application, I wrote a music player called Nukebox a couple of months ago which uses Dojo and dgrid (though its scaffolding is a bit different than the newer boilerplate).
I have your test code working in Electron.
First, I assume you are trying to load dojo.js from the web. //ajax.googleapis... etc will probably attempt to pull the file from the file system. I added http: to the front of it. That allowed me to open a .html file in the browser and work. I am not sure if that was an oversight or not.
Secondly, because the browser-window has node-integration on by default, 'require' is already defined and it does not understand what you are passing to it because it expects a path not an array. If you construct your browser window with node-integration turned off it should work:
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600, "node-integration": false});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Note the "node-integration": false. This may cause additional issues if you want to use node integrations in your app. However, your code should work.
I am using dijit/form/Select in my app to dynamically bind some data. I am able to bind the data to the Select element but problem is that my Select element is not rendering properly in both of my Emulator and simulator. I am using embedded dojo 1.9 in worklight and below are the code that I am using. Is there anything else that I need to add in my code to use dijit select ? I searched for this type of question in this forum and I found this link where the user is having same problem but that is unanswered.
script error on require "dijit/form/Select"
My HTML code-
<select id="selectCity" name="selectCity" data-dojo-type="dijit/form/Select">
</select>
my script code-
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
I'm pretty sure it's because theming in dojox/mobile is different from theming in dijit. To use a dropdown using dijit modules, you would have to configure a a theme. Usually this means you need to import a CSS file and add a class to the parent element (most common practice is by adding it to your <body> tag). But these themes are not device specific.
A better solution would be by using the dojox/mobile/ComboBox, more info can be found at the reference guide.
I have exactly the same problem as the person here.
I know how to solve it. You're supposed to change the following in the jQuery Tools.js, right?
find:
$.fn.tabs = function(query, conf) {
change to something like this:
$.fn.fpTabs = function(query, conf) {
My problem is that I just can't find that line anywhere, not even with the search function of my editor!!
I've downloaded the newest version of Flowplayer.org's jQuery Tools and I uploaded it to pastebin: http://pastebin.com/ispnQMVH
Can you help me figure out how to do this?
If there's a nother way to prevent jQuery-ui tabs to inferfere with jQuery Tools tabs, then please let me know :)
Thanks a lot in advance!!
I'm putting this down as an answer because it would be a mess in a comment.
Looks like you can grab the unminified source from Github:
https://github.com/jquerytools/jquerytools
You could also try a quick hack to rename the tabs plugin in situ. If you load the jQuery Tools Tabs JavaScript file, then load a little patcher like this:
(function($) {
// Rename the tabs in-place.
$.fn.fpTabs = $.fn.tabs;
delete $.fn.tabs;
})(jQuery);
and then load jQuery-UI:
<script src="/js/jquery.js"></script>
<script src="/js/jquery.tools.min.js"></script>
<script src="/js/jquery.tools.tabs-renamer.js"></script> <!-- see above -->
<script src="/js/jquery-ui.min.js"></script>
You'll have to change the names of course but it should work if you load things in the above order.