Adding a filter header row to ExtJS GridPanel - extjs

I know that it's possible to add a filter row UNDER the column title because I've seen it done with Coolite. But since I'm a total newbie with Sencha (ExtJS), I have trouble finding how to do it with the ExtJS.grid.GridPanel directly in the script. Would you point me in the right direction with some samples please ?
If possible, I would like to do so without plugins, but if there's one out there doing great and easy to use, I could change my mind.
Thanks !


Here you have a link to the GridHeaderFilters Plugin. There you have an easy example of how to use it.
And regarding your comment about trying to do this without a plugin I recommend you not to do it. Because this might seem like a easy code to write but I believe it is not. And that is why this plugin has hundreds of lines. I think this is not a plugin full of features that you won't use, this plugin just does the filtering the way you need it.
And as a final note, if you are expecting the exact same behavior as in this coolite example I think you are out of luck. Because if you get the javascript source code of that example and run it through jsbeautifier you will see that this example is not using any ExtJS plugin and is not a easy code as is using a really complex template for the headers.

Related

How to use ng-grid in Hawtio?

I believe that ng-grid requires at least AngularJS 1.2.x.
I noticed that there is an ng-grid module in Hawtio. Is it possible to use this ng-grid module in Hawtio's current AngularJS version 1.1.5?
Can someone give an example how to use this? We tried but were getting errors, maybe due to version dependency.

Yeah you can use that, though we used ng-grid in the start with hawtio, but it has some issues (not all data was shown in all browsers etc) and was slow. And we needed a simple grid, so we wrote a simpletable we used instead.
But you should be able to use it,maybe search the source code of hawtio-web and find the few spots left where ng-grid may still be in use.

Migrating from Ext JS 2 to Ext JS 4

I am getting this error on page load itself.
Error: [Ext.extend] Attempting to extend from a class which has not been loaded on the page.
javascript//ext-4.1.1a/ext-all-debug.js
Line 4391
I'm not able to render the page at all. Any ideas?
I have also used extjs4 compatibility for migration.

Are you using all of the resources outlined here, including the screencasts? The videos take a little time commitment, but I think you'll find them quite helpful as they walk through several examples of how to debug exactly these types of issues. Learning to debug effectively will be the best way to tackle this type of migration.

There's no class named 'TreeNodeUI' in ExtJS. If you want treepanel, then you need to extend 'treepanel'. Please have a look at examples given on Sencha website before trying out any code.

Microsofts latest anti XSS Library for asp.net - 4.2.1 - Problems and Alternatives(?)

I have a problem using the their latest WPL v 4.2.1. The stripping of suspect HTML, javsacript and styling is so aggressive it strips out ALL the CSS.
I understand that CSS can be easily used to inject malicious javascript using URL references, but this also means im losing all the innocent styling that makes my content look readable. The last thing i want displayed on my aspx pages is boring 'plain' text.
My question: Is there another library on the market/the web which I can use which will not strip off my styling elements completely? By that i mean selectively removing only the possibly malicious attributes within the CSS.
I have tried searching but without much luck. If anybody knows of one, could you post the answer here please? I know the current source code can be modified but I'd really like to use an available project if there is one as i'm not very knowledgeable with cross site scripting.
Thanks a ton!

How to create grid system in Drupal

http://i.imgur.com/FSueo.png
I want to create a grid system like the one in picture in drupal 7. Can anyone point me in the right direction?
I first tried using Zen, but I could not figure out how to use SASS to make this grid system.
Then, I checked out the panels module, but that also wont help; it only makes more columns, but I want to make more rows.
I am very comfortable with CSS and php so if you have suggestions regarding modifying a certain CSS or php file, its more than enough. Just let me know which file to modify, and what to look for...
Thanks!

Have you tried something like Omega? If you know CSS then with the regions it provides you should be able to achieve that structure.

Omega is definitely perfect for this grid use case. Try it out!
If you'd like to stick with Zen though, it is worth noting that using SASS is not required to use Zen - from the Zen project page:
If you're not ready for Sass yet, Zen still includes a full set of well-documented CSS files. Sass integration adds zero overhead, so if you simply ignore all of Zen's Sass, your site performance isn’t penalized. No worries!

Making development with Ext JS fast

Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.

There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.

When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.

If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?

Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.

ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.

I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.

Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.

Resources