Extjs, dynamic fieldsets with delete button

Extjs is powerful and flexible, fieldsets can be actually used to handle dynamic bloc fields ; such as publications for example which containing the same fields

here is a code example of what’s possible to do with fieldsets, in this case we add custom buttons for deletion



var form = new Ext.TabPanel({
        id: 'real-popin-edit-form-tab-id',
        border: false,
        labelWidth: 120,
        items: [
        new Ext.FormPanel({
            id: 'real-popin-edit-form-id',
            tbar : [{
                text: 'add fieldset',
                handler: fieldsetAdd,
                iconCls: 'new'
            labelWidth: 120,
            title: " .. ",
            items: [


var counter = 0;

fieldsetAdd = function()
        xtype: 'fieldset',
        width: 500,
        labelWidth: 120,
        title: "Fieldset [ " + counter ++ + ' ]' ,
        defaults: {
            width: 350
        defaultType: 'textfield',
        border: true,
        // for ie position pbs
        style: 'background-color: #F1F1F1; margin: 5px auto;position: relative;',
        iconCls: 'icon-properties',
        id : 'realisation-visuel-' + counter,
        items : [
            width: 18,
            xtype: 'button',
            name: 'AddDirectAttr',
            style: 'position: absolute; top: ' +
              (Ext.isIE|| Ext.isChrome|| Ext.isGecko ? 0:-20) + 'px; right: 10px;',
            tooltip: {
                text: 'Delete fieldset.'
            iconCls: 'delete',
            id : 'delete-' + counter,
            handler : function(t, e){
                Ext.MessageBox.confirm("Delete", "Are you sure ?" , function(btn){
                    if(btn == 'yes') {
                        currentId = t.getId();
                        temp = currentId.split('-');
                        Ext.getCmp('realisation-visuel-' + temp[1]).destroy();


            xtype : 'textfield',
            name : 'position-' + counter,
            fieldLabel: 'Position'
        }, {
            xtype : 'textarea',
            name  : 'description-' + counter,
            fieldLabel: 'Description'



and here is the result

Enjoy !

Sencha, My First iphone application

Here we are, Iphone application development  is being more and more easier for web developers, all you have to know is Javascript, html and Css .. 

Sencha is a HTML5 Mobile web application framework .. in other words it simplify creation of mobile application using HTML5 features.

In this article i will try to list all the tweets where the keyword  “hbensalem” exists, i’m using Twitter Api and search.twitter.com.

Setting the project

First of all you’ll need to download sencha-touch from Sencha website.

Then create a html file with this content :

<!DOCTYPE html>
        <meta charset="utf-8">
        <!-- Sencha Touch CSS -->
        <link rel="stylesheet" href="./sencha-touch/resources/css/sencha-touch.css" type="text/css">
        <!-- Sencha Touch JS -->
        <script type="text/javascript" src="./sencha-touch/ext-touch-debug.js"></script>
        <!-- Application JS -->
        <script type="text/javascript" src="index.js"></script>
            .tweet {
                border-bottom: 1px solid #EEEEEE;
                margin: 0;
                overflow: hidden;
                padding: 15px 5px;
                background-color: grey

            .avatar {
                float: left;
                height: 50px;
                overflow: hidden;
                width: 50px;
            .tweet-content {
                font-size: 16px;
                line-height: 17px;
                margin-bottom: 2px;
                margin-left: 58px;

We need to pay attention to :

  • sencha-touch.css
  • ext-touch-debug.js

Building the application “script.js”

    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon : false,
    onReady: function() {

        var timeline = new Ext.Component({
            title: 'Timeline for hbensalem',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                    '<div class="tweet">',
                            '<div class="avatar"><img src="{profile_image_url}" /></div>',
                            '<div class="tweet-content">',

        var panel = new Ext.TabPanel({
            fullscreen: true,
            items: [timeline]

        var reader =  Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    q: 'hbensalem'
                callback: function(data) {
                    data = data.results;

Some explanations :

Timeline is the component who deals with data from JSON request, the tpl section is for Template, data content is parsed and every token is replaced by the good value.

Panel : is the main container.

Reader : is the JSON reader, we told him where to search and we passed the query. Callback function is called when the loading of request is finished.

And this is the result :

Source and further reading :

Extjs, Add tooltip to grid row

The purpose of this tutorial is how to add tooltips for row grids, you can you this when the row is a text field for example.

first of all we need to tell Extjs that row need to be rendered by a custom function, on the column Model add renderer attribute :

  id : 'motivation',
  header : 'motivation',
  width: 200,
  dataIndex : 'motivation',

then add the addTooltip function :

function addTooltip(value, metadata, record, rowIndex, colIndex, store){
    metadata.attr = 'ext:qtip="' + value + '"';
    return value;