Easiest way to combine ExtJS with jQuery UI

Although there are many ways to integrate your jQuery script into a native Extjs based solution, the easiest way is to use html property of a panel. In the area that you want to insert your jQuery based UI, you need to add a panel with the following config:

{
    html:'< div id = "id_area" style="width:100% height:100%" > < /div > '
}

This will be our main container. Using $('#id_area') you can insert any dom element you want. Main element will cover all of your panel by using style width and height properties.
However there are certain rules in that approach.First one is z-index. If you want to use navigation like elements, expanding menu may result in a div element whose level is lower than any other extjs based panel. To cope with this problem, you may want to use main panel's html property instead of using sub panels.
Second problem is about events. If you want to assign a method to an event, you need to implement that method outside of the Extjs onReady function since onReady will create its own scope.
There is also one more thing about html property. It can be cleared using div's innerHTML property, when you add an extjs panel into your main panel, main panel's html content will be ignored and your inserted panel will cover all of your main panel.