the singularity of being and nothingness
Archive for July, 2011
ExtJS Quickie: Full Width Text Fields
Jul 17th
Ok, so a lot of posts I make are not so much about “hey, look at this cool thing I figured out” as much as it is saving a reminder of myself for how to do something when I inevitably forget it later on 🙂
So for today’s example, the problem I was having was how to make a textfield fill up 100% width of a panel. I think in earlier versions of ExtJS, there was an “autoWidth” option, but alas, it doesn’t work in ExtJS 4. Moreover, using “width: ‘100%'” doesn’t work either, since the width option expects a numeric value.
Turns out, this is pretty stupid and simple. Here’s a quick example:
Ext.define("Gloss.view.search.Form", {
extend: "Ext.form.Panel",
alias: "widget.searchform",
frame: true,
items: [
{
xtype: "textfield",
anchor: "100%"
}
],
initComponent: function() {
this.callParent(arguments);
}
});
As you can see, adding in the “anchor: 100%” solves the issue quite nicely. Now, as the container is resized, the textfield will resize as well.
Share this: ItemClick and ItemContextMenu
Jul 8th
Custom context menus are one of the features of ExtJS that I love. They are stupid simple to add in, and ridiculously customizable–they can really add some value to your app and help preserve real estate if you have a lot of embedded actions that need to happen.
For example, in one of my controllers, I’m looking for the “itemcontextmenu” event on a grid:
this.control({
"bookmarks": {
itemclick: function(...) {
....
},
itemcontextmenu: function(view,record,item,index,e) {
var me = this;
var r = record.data;
e.stopEvent();
if(item.ctxMenu) {
item.ctxMenu = new Ext.menu.Menu({
items: [
{
text: "Delete This Thing",
icon: "images/delete.png",
handler: function(btn) {
me.deletebookmark(record,item);
}
}
]
});
}
}
})
One of the issues I was running into, however, was that whenever I would “right” click using my Mac’s “magic mouse” (e.g., Ctrl+click), both the itemclick AND itemcontextmenu events would fire.
To debug this, I took a quick peek at the “event” object passed on both methods. This object provides a bunch of information about the event that was fired, including:
- any keys that triggered the event
- whether Ctrl was pressed
- whether Shift was pressed
- what “type” of event (e.g., “click” for a mouse event)
Armed with this information, I was able to adjust my “itemclick” listener a bit, More >
Adding QTips to GridPanel Rows in ExtJS 4.0
Jul 4th
Need to add a custom tooltip (quick tip) to rows in a GridPanel in ExtJS 4.0? Super easy. In your column definitions, simply add a rendered, passing a custom function.
this.columns = [ { text: “Bookmark”, dataIndex: “title”, flex: 1, renderer: function(value,metaData,record,colIndex,store,view) { metaData.tdAttr = ‘data-qtip=”‘ + value + ‘”‘; return value; } }…
A couple notes:
- Make note of the “metaData” object. I think in earlier versions, the “tdAttr” was just “attr”…so if you’re upgrading, you might have to make a slight change
- Notice the namespace for the qtip. In earlier versions of ExtJS, it was “ext:qtip”, but has been changed to “dadta-qtip”…no biggie, but a headache if you didn’t read the docs 🙂
That’s it! With such a slight modification, you get a nice tooltip generated for each row in your grid. Enjoy.
Share this:
