Wednesday, April 25, 2012

Qtips and Interceptor



Recently I had come across scinario where I had to create a help icon next to field label. Initially I thought of putting regular tooltip on the field label with below steps.

1.     enable quiktips –

Ext.onReady(function(){
                        Ext.QuickTips.init();
                        ……….
});

2.     use ext:qtip –

{             xtype: 'textfield',
fieldLabel:'Item 2 <span style="color:green;" ext:qtip="This is help text">?</span>'
           
}



So when you hover over ‘?’, it gives you help message or information for the field.

Now, lets say you need to do the same thing for lot more fields in the application, repeating the same way span with style is not a good idea. You need to put level of abstraction on top of the textfields and that’s where interceptor comes in picture.

Interceptor performs the action before the control loads; it executes the same code with intercepting and adding snippet. Basically its kind of extends the base class, and right before the execution it intercept and manipulates the functionality and add the visual or operational behavior. Take a look at below code –

Ext.intercept(Ext.form.Field.prototype, 'initComponent', function() {
    var lbl = this.fieldLabel,
    var msg = this.helpMsg;
    if (!Ext.isEmpty(msg) && !Ext.isEmpty(lbl)) {
       this.fieldLabel = lbl+'<span class=’info-icon’ ext:qtip="'+msg+'"/> ';
    }
});

and your field label definition would be –

{
             xtype: 'textfield',
fieldLabel:'Item 2’,
helpMsg: ‘<b>This is help text</b><br>For any question reachout to admin@admin.com'
           
}

And for all the textfields in the form you should be able to use helpMsg config option seamless.

Sunday, April 22, 2012

ExtJs Tooltip


Tooltip in ExtJs - There are various ways to get tooltip in ExtJs, we will explore different options in below list.

1. Tooltip in Grid header -
new Ext.grid.GridPanel({
        store: store,
        columns: [
                       {
                           id       :'company',
                           header   : 'Company',
                           tooltip  : 'Company Name', 
                        width    : 160, 
                        sortable : true, 
                        dataIndex: 'company'
                    },….
            ]
            })

2. Get Tooltip on all the grid options – You need to use metadata attribute to set the tooltip on the grid items. Consider below example where pctChange is renderer on grid column.
    function pctChange(val, metadata) {
            metadata.attr = String.format('{0}title="{1}"', metadata.attr, val);

    }

3.  Tooltip on other form items –
 {
    xtype           :   'textfield',
    fieldLabel   :    “<span ex:qtip=’Please Contact admin for more info.’>Comments</span>”,
    ref               :    'comtext'
 }

if you want html behavior on the tooltip, you can provide tags in span –

{
   xtype           :   'textfield',
   fieldLabel   :    “<span ex:qtip=’<b>Please Contact admin for more info.</b><br>admin@test.com’>Comments</span>”,
   ref               :    'comtext'
}

4. Other common and most asked place for tooltip is on drop down/combo, which is tough to achieve as there is no default way to get it, you have to use various tricks to get it...coming soon…

Feel free to drop comments, questions!

Sunday, April 1, 2012

Python XML node parsing


Parse value between tags, i.e. XML, HTML

e.g. <title xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom">New York Knicks' Jeremy Lin needs knee surgery, likely done for season</title>

Lets say, you want to extract value from title tag, which is shown in bold in above.
There are multiple ways; one of the simple one is as listed as below -

>>> import xml.dom.minidom
>>> a = ‘<title xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom">New York Knicks' Jeremy Lin needs knee surgery, likely done for season</title>’
>>> x = xml.dom.minidom.parseString(a)
>>> x.firstChild.firstChild.toxml()
u'New York Knicks' Jeremy Lin needs knee surgery, likely done for season'

There are other ways too, but I found this one simplest!

MySQLWorkbench - error on DELETE, UPDATE


Sample query –
Delete from MyDB.SourceUrls

Error -
Error Code: 1175 You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column

Here is the solution -
By default MySQL editor runs in Safe Mode, which means it restrict users from comprehensive delete and update operation. You need to put the where clause in your query. You can follow any of below steps to avoid the error -

1. Add SET SQL_SAFE_UPDATES=0; before your update query. -
SET SQL_SAFE_UPDATES=0;
Delete from MyDB.SourceUrls

2. Follow below steps –
MySQLWorkbench > Preferences > SQL Editor > Query Editor
uncheck option – “Safe Updates”. Forbid UPDATEs and DELETEs with no key in WHERE clause or no LIMIT clause.