Archive for the ‘Uncategorized’ Category

How to delete left-over folders after Windows Update

November 27, 2012 Leave a comment

Sometimes Windows Update leaves folders behind with long and meaningless names, and it is not always possible to delete them from Windows Explorer. So I found this solution that always works.

I’m going to pretend that the name of the folder we want to delete is abc123; replace that with the actual folder name. You can save yourself a lot of typing by using the TAB key; when typing a command you can just enter the first two or three characters of the folder name and then press TAB. You need to press ENTER after typing each command. Double-check each command (and in particular make sure you haven’t accidentally specified a folder you don’t want deleted!) before pressing ENTER.

Start by opening an administrative command prompt. You do this by clicking on the Start Menu, typing cmd and pressing CONTROL-SHIFT-ENTER. You should get a confirmation prompt, and might need to enter an administrative password. Then, in the command prompt:

cd /d c:\
dir /ad

You should see a list of folders, including the folders you want to delete as well as various Windows folders such as Program Files and Users.

md empty
robocopy /e /purge /b empty abc123

What we’ve done here is created an empty folder and told Robocopy to copy it over top of the folder we’re trying to delete. The /purge tells Robocopy to delete the files and the /b tells Robocopy to bypass file security. Robocopy will list the files in the folder as it deletes them, and will also produce a summary at the end showing how many files were deleted (look for the column titled Extras).

Repeat the robocopy command for each of the folders you want to delete. You don’t need to repeat the md command each time.

Robocopy won’t remove the folder itself, so we will do that separately:

takeown /F abc123
icacls abc123 /grant administrators:F
rd abc123

The first command takes ownership of the folder so that we can change the permissions, the second gives us permission to remove it, and the last line removes it. Repeat these three commands for each folder you want to delete.

Finally, we remove the empty folder we created, since we don’t need it any more:

rd empty

Hope this helps.


Categories: Uncategorized


November 27, 2012 1 comment

The blog has been resurrected. From now on I will be posting anything of interest to me, not necessarily related to web development.

Categories: Uncategorized

Using ref config option in Ext JS 3.0

May 18, 2009 3 comments

In Ext JS 2.x if you needed to get a reference to a Component which was nested deep inside a Container and you had a reference only to this Container, you could either assign that Component a unique id and use it with Ext.getCmp() or call a particular method of the Container and, if necessary, methods of other nested containers depending where the Component is in that hierarchy. Ext JS 3.0 makes it a little easier with the new itemId config (see my previous post).

In addition to itemId another new configuration option is introduced in Ext JS 3.0 which is supposed to completely eliminate problems like the one described above. The name of this config is ref.

ref is a path specification, relative to the Component’s container (ownerCt) specifying into which ancestor Container to place a named reference to this Component. The ancestor axis can be traversed by using ‘/’ characters in the path. For example, to put a reference to a Toolbar Button into the Panel which owns the Toolbar:

var myGrid = new Ext.grid.EditorGridPanel({
    title: 'My EditorGridPanel',
    store: myStore,
    colModel: myColModel,
    tbar: [{
        text: 'Save',
        handler: saveChanges,
        disabled: true,
        ref: '../saveButton'
    listeners: {
        afteredit: function() {
            // The GridPanel has the reference to the save button

In the code above, if the ref had been 'saveButton' the reference would have been placed into the Toolbar. Each ‘/’ in the ref moves up one level from the Component’s ownerCt.

Think about places where you could benefit from this config. It’s a small thing that has huge impact.

Categories: Uncategorized

id vs. itemId

May 18, 2009 6 comments

In Ext JS 2.x if you need to access any component anywhere in your code and you don’t have an object reference available, you have to assign that component an id and later pass it to Ext.ComponentMgr.getCmp() method (or its alias Ext.getCmp()) to retrieve the reference to the component. Since Ext JS uses a global MixedCollection to store components’ id’s, you must use unique id for every component that you create. While it has worked for most developers, it is often hard to keep track of used ids, especially if you are a member of a bigger team that works on one project.

In Ext JS 3.0 an itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp(), use itemId with Ext.Container.getComponent() which will retrieve itemId’s or id’s. Since itemId’s are an index to the container’s internal MixedCollection, the itemId is scoped locally to the container, avoiding potential conflicts with Ext.ComponentMgr which requires a unique id.

var c = new Ext.Panel({
    height: 300,
    renderTo: document.body,
    items: [{
        itemId: 'p1',
        title: 'Panel 1',
        height: 150
    }, {
        itemId: 'p2',
        title: 'Panel 2',
        height: 150

var p1 = c.getComponent('p1'); // not the same as Ext.getCmp()
var p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling
Categories: Uncategorized

Using fbar config option in Ext JS 3.0

May 6, 2009 16 comments

Rendering a panel or a window that has a footer that contains action buttons, is a very common task for UI developers. This tutorial demonstrates how to use the new and still undocumented fbar configuration option in Ext JS 3.0 for advanced footer rendering.


In Ext JS prior to version 3.0 you had to use buttons configuration option to define your buttons and buttonAlign option to align them either to the left, center or right.
Although you could render other components in a footer by passing their instances, you could not split them apart, and also you could run into different rendering or behavior issues.

Another way to create a footer was to use bbar configuration option to create a bottom Toolbar.

bbar config option

But a Toolbar was not meant to be used as a footer and does not look like one either. Starting from Ext JS 3.0 you can use the new fbar configuration option to achieve the desired result.

What is fbar?

fbar is very similar to bbar, except that it creates a real footer rather than a bottom Toolbar. Currently it supports rendering of true buttons and other components, plain text, spacers, and a fill to split groups of components apart. Separators are rendered as spacers (blank space). Keep in mind that the only way fill is going to work is if you set buttonAlign config option to left.

fbar config option

Here is the code I used for this example:

new Ext.Window({
    title: 'Test Window',
    width: 500,
    height: 120,
    buttonAlign: 'left',
    fbar: ['Options:', {
        xtype: 'trigger',
        emptyText: 'Please select'
    }, '->', {
        text: 'Update'
    }, {
        text: 'Cancel'

As you can see the syntax is identical to tbar or bbar, but the result is very different. It is a real footer with a plain text and a trigger field on the left, two true buttons on the right and a fill in the middle. To build a footer that would look exactly like this in Ext JS 2.x would require you to have a container with a few levels of nesting inside. With fbar suffer no more! 🙂

Categories: Uncategorized

Editing static text with Ext.Editor

May 4, 2009 3 comments

This tutorial demonstrates how to use Ext.Editor to implement inline editing of static text on a web page. Ext.Editor is a base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.

Getting started

The first thing we need to do is to render the actual element containing the text, that we would like to be edited, and assign it an ID.

<div id="title">Lorem Ipsum</div>

Setting up Ext.Editor

Two simple steps are required to make Ext.Editor work. First, we create an instance of Ext.Editor. The only required configuration option is field, that can be either a Field object (or its descendant) or a config object for field.

var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'

Second, we call the startEdit() method of out Editor instance and pass the element to edit, or its ID. This method starts the editing process and shows the editor.

Ext.get('title').on('click', function() {

Looks simple, right? Well, in essence it is all you need to achieve the effect of an editable content on your page. However, if you run this code as is, you will not get precisely what you expect. The editor will appear in the center of the div. The content of our element remains unchanged after you are done editing. And lastly, you probably want to save the updated text somewhere on the server, for example in a database.

Configuring Ext.Editor

Let’s take a look at more complete example:

var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'
    autoSize: true,
    updateEl: true,
    cancelOnEsc: true,
    completeOnEnter: true,
    listeners: {
        startedit: function(boundEl, value) {
            this.boundEl = boundEl;
        complete: function(editor, value, startValue) {
            if (value === startValue) return;
            // otherwise save your change,
            // for example by making AJAX request
            // Ext.Ajax.request(...);

Most of the configuration attributes are self-explanatory, but I will quickly go through them anyways. autoSize:true resizes the editor field to the size of the bound element. updateEl:true makes sure the bound element is updated when editing process is complete. cancelOnEsc:true hides the editor field and shows the original content without making any change when the user hits Esc key. completeOnEnter:true hides the editor field and updates the content of the bound element (if updateEl is true) when the user hits Enter key, otherwise the user has to click outside of the editor field.


Ext.Editor exposes several events. The two important ones are startedit and complete. The good thing about Ext.Editor is that it is not tied to a single element and therefore one instance can be used to edit multiple elements. When startedit event is fired it is passed a reference to the bound element, so you can store it in the editor object (this.boundEl = boundEl;) and access it later from the complete event handler in order to save the change. Note, that complete event fires even when no change has been made to the original content, so to avoid unnecessary remote calls you should compare value and startValue (the two arguments passed to the event handler) before executing any code that saves the change, like in the example above.

Last thing you might want to do is to use the same font family and size in both the element and editor field, add some padding etc. This can easily be done with a little CSS code.


Ext.Editor is indeed a very handy little guy that can save a lot of pain if you try to implement something like this yourself. And why would you do crazy thing like this in the first place if there is Ext JS 🙂 Have fun with it!

It is my first tutorial, so any constructive criticism is accepted and appreciated. Thank you.

Categories: Uncategorized

Writing a Big Application in Ext

April 9, 2009 1 comment

If you are not sure how to build a big application in Ext JS, don’t know where to start, then here’s a nice three part article by Jozef Sakalos aka Saki about how to do just that:

Writing a Big Application in Ext (Part 1)
Writing a Big Application in Ext (Part 2)
Writing a Big Application in Ext (Part 3)

He has pretty nice file patterns too, check them out.

Categories: Uncategorized