Wednesday, March 30, 2011

WebEditor - Web server based text editor

I do most of my coding during the many quiet spells at work. As you'd expect we can't install software on our work PCs so I don't have the luxury of being able to use an IDE.

In the past I have used a browser based ftp client such as net2ftp.com to download the file I'm working on, modify it in Notepad and then upload it for testing.

I then came across WebPad (http://dentedreality.com.au/projects/webpad/) which allowed me to modify the files making up my web sites / applications directly on the server. However, it does not like having multiple instances open at the same time which caused me a few problems when I first found out. When working on a web app it is helpful to be able to have the HTML / Javascript / PHP / CSS files all close to hand.

As such, I started work on an ExtJS based, tabbed, web server housed, text editor.


I will aim to put updates here as I reach definite milestones.

Tuesday, March 29, 2011

ExtJS - Confirm close of tab in tabpanel

Couldn't find a complete solution when trying to solve this problem so here's how I did it.

A handler is added for the 'beforeclose' event. Due to the Ext MessageBox being asynchronous, the confirm box will show while the function returns false and cancels the 'close' event of the tab. If 'no' is selected (the user does not wish to save changes) then the tab is removed from it's parent container. Can be used to extend any type of component you are using in your tabpanel.

Hope this saves someone some time and trouble.


Ext.ConfirmPanel = Ext.extend(Ext.Panel, {

  initComponent: function(){

    Ext.ConfirmPanel.superclass.initComponent.apply(this, arguments);

    this.addListener({
      beforeclose:{
        fn: this.onClose,
        scope: this
      }
    });


  },

  onClose: function(p){
    Ext.MessageBox.show({
      title: 'Save changes?',
      msg: 'Do you want to save changes?',
      buttons: Ext.MessageBox.YESNOCANCEL,
      fn: function(buttonId){
        switch(buttonId){
          case 'no':
            this.ownerCt.remove(p);   // manually removes tab from tab panel
            break;
          case 'yes':
            this.saveToFile();
            this.ownerCt.remove(p);
            break;
          case 'cancel':
            // leave blank if no action required on cancel
            break;
        }
      },
      scope: this
    });
    return false;  // returning false to beforeclose cancels the close event
  }

  saveToFile: function(){
    //your code to save changes here
  }

});

Ext.reg('confirmpanel', Ext.ConfirmPanel);  // register the extension as an xtype

var yourTabPanel = new Ext.TabPanel({
  activeTab: 0,
  items: {
    xtype: 'confirmpanel',   // using the new xtype as your tab panel item will give the confirm function on closing
    closable: true
  }
});
 
Please leave a comment if this code helped you or if you have anything to add.