Custom js builder for ExtJs - javascript

We are using ExtJs 3.4. I would like to build a trimmed version of ext-all.js so that the file size will be reduced. Is there any automated way to build this custom file or should I manually dig into the file and search for dependencies.
We have a page that use the following components.
Tab Panel
Panel
XTemplate
Radio Group
Button
And we use 'view port' to render the components. Can any one suggest how can we achieve this?
Even before that, given our case where we use these components, is it advisable to go for this customization ?

See http://www.sencha.com/learn/legacy/Tutorial:Building_Ext_From_Source

Related

How to customize Nihilo.css?

One of the available themes in Dijit is Nihilo. I am using dijit/layout/.. for displaying some charts and graphs . I want to change some of the styles being used. Can any one tell me how to customize Nihilo.css and use the customized version?
Don't change nihilo.css, create another CSS file and put the link tag for the second file after the link tag for nihilo.css.
This way, if you upgrade Dojo, you will not have to merge your changes back in.
If you need to customize nihilo, I would suggest to have a look at this official guide Customizing a Theme.
Basically the idea is to build your theme, based on nihilo leaving the original nihilo untouched,.

Check for existance of loaded JavaScript libraries for my app's use otherwise load my own versions?

I am building a Project Management application as a SugarCRM Plugin.
In my app, which uses a lot of JavaScript, exscecially for a part that shows a Project Task record in a popup Modal Div.
So on the page there is HTML for 1 Modal Div. I then update the Task record fields inside of that 1 modal every time a new task record is clicked on. It brings the Task Modal into view and updates all the task fields and re-initiates all the JavaScript code that works on those fields.
For example almost all the data fields for a Task record that are shown in the modal div have Edit-in-place capability using the jQuery library called X-Editable. There is also a scrollbar plugin for custom scrolling inside of the Modal, Datepicker library, and some more little plugins here and there. As well as all my custom code, hundreds o lines for this section alone!
Now that I explained the app a little bit, I can move on to the questions...
SugarCRM v6.x.x uses jQueryUI DatePicker plugin for it's own Date Selectors.
SugarCRM v7.x.x changes and uses Bootstrap DatePicker library (this one http://www.eyecon.ro/bootstrap-datepicker/)
So in my plugin app I have considered both of these for my Date field needs since they are already loaded into the page anyways!
Once issue I have is the SugarCRM v6 vs v7 using different libraries.
But that isn't a real big issues as I am able to build 2 versions and target the code to the correct version for the user.
My question is, knowing that these libraries get loaded into the page, is there a reliable way for my app to check for there existence and use them if they exist? And then if they do not, load my own versions?
Or am I better off loading my own version, even though it could be loaded into the page already?
You can use duck typing to check what script is loaded. For the bootstrap version, you can check if the $.fn.datepicker.Constructor method exists; it's exclusive to that script. The jqueryui version has the same property but in lowercase.
Edit cause I didn't notice the last part of the question. If none of the scripts have loaded, you can load your own the same way the HTML5 Boilerplate does (assuming we are still working on the datepicker):
<script>window.MyLibrary || document.write('<script src="//routeToMyScript.js"><\/script>')</script>
<script>$().datepicker || document.write('<script src="//routeToMyScript.js"><\/script>')</script>

Javascript to enhance parameterized builds

The 'parameterized' builds in Jenkins are a bit limited. What if I want to have options that are related to one another?
For example 2 drop down lists. The selection from the first one controls the options in the second...
I don't really see any prescribed way to implement this, but a thought (and it feels super-hacky) would be to use javascript.
I've noticed you can enter <script> tags in the description attribute of parameters. Maybe a place to drop in some js? Also looks like prototype.js ships with the system.
So just how bad an idea is that, or is there a 'correct' way to do such a thing?
Check out the Active Choices Plugin it does exactly what you're looking for:
jenkins-ci.org - Active Choices Plugin
github.com - Active Choices Plugin
A Jenkins UI plugin for generating and rendering multiple value
options for a job parameter. The parameter options can be dynamically
generated from a Groovy script and can respond to changes in other job
parameters. The value options can be rendered as combo-boxes,
check-boxes, radio-buttons or rich HTML. Active Choices strives to
provide in a single plugin functionality found scattered among several
pre-existing plugins and some unique capabilities that are not
available yet.
The Active Choices plug-in provides additional Jenkins
parameter types that can be rendered as user interface (UI) controls
in job forms.
Once the plugin is installed three new parameter types become
available:
Active Choices Parameter
Active Choices Reactive Parameter
Active Choices Reactive Reference Parameter
Active Choices parameters allow users to select value(s) for a job parameter. Parameter values can be:
dynamically generated (using Groovy or a Scriptler script)
dynamically updated based on other UI parameters
multi-valued (can have more than one value)
rendered with a variety of UI controls, including dynamic HTML
I think you would be able to accomplish your listed example with the following dynamic parameters plugin without using javascript: https://github.com/tekante/Dynamic-Jenkins-Parameter/wiki. I have not personally used the plugin as a disclaimer. It looks like it will probably need to be built first based on what I have seen in the GitHub repo and the fact that I cannot find it on the official Jenkins plugin page.

Testing extjs apps

How can I test extjs application when there are pregerated ids for components or compoent parts like in a grid.
I can add ids to each component but what if I miss one or more, and the application is big and complex?
Is there a function or some module in ExtJS/Siesta which allows you to locate components/elements in the application without beign dependent on predefined ids for each component
First of all be very careful using IDs on the components. I have seen my fair share of problems with them.
Second, ExtJS provides several ways of targeting Components and Elements. Don't mix the two.
For Components:
Ext.getCmp(id)
Ext.ComponentQuery.query()
up()
down()
nextSibling()
previousSibling()
child()
previousNode()
plus various find.. methods
For Elements:
Ext.get()
Ext.dom.Query()
more on DOM Query http://docs.sencha.com/core/manual/content/domquery.html
With Siesta you have loads of options when targeting a place to click etc:
Dom node id (same as Ext Component id)
Any component query
Any CSS query
A coordinate
Real Ext Component JS instance
Real DOM node instance
Composite Query (combination of Component Query and CSS query, '.x-grid => .x-grid-cell'
A function, returning any of the above.
More info in my slides here: https://speakerdeck.com/mats/testing-sencha-touch
You may want to look at the automated functional GUI testing tool RIATest.
RIATest knows how to ignore ids dynamically generated by ExtJS, yet if you manually assign ids to the components the tool will use them for identification (see e.g. #tree2 in the sample below).
The tests in RIATest operate in terms of ExtJS UI widgets.
Examples of RIATest scripts that work with ExtJS widgets:
The following clicks on an ExtJS button with label "Next Page":
ExtButton("Next Page")=>click();
And the following does drag-n-drop of a row from one ExtJS tree to another:
ExtRow("Controller.js")=>dragAndDropTo(
ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));
And this collapses the header of an ExtJS box:
ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();
(All sample code above is from real test scripts that run on ExtJS sample applications).
(Disclaimer: I am a RIATest team member).

Does using only plugins from twitter bootstrap make sense?

I'm not currently using twitter bootstrap, but I do like some of the components. Does it make sense to use a few plugins from that framework when I'm not using the rest of the framework? bootstrap-alert.js for example. I'm also not sure how mutually exclusive the plugins are from the rest of the framework. Would i have to load everything to use a couple, in which case it probably would make more sense to look elsewhere for nice popovers etc.
Use the customise section of the website to create a smaller version of the framework with just the components you want to use. I've used a few of their components in conjunction with ExtJS to get the look I wanted. i.e. Buttons, Badges and Alerts.
Customize Twitter Bootstrap

Categories

Resources