Using ExtJS and JQuery on the same page

This widget shows an ExtJS Panel and Image component, along with the JQuery DeepLiquid JCrop widget, which allows you to select a crop area on an image.

Try it out by dragging your mouse over the image. You can also move the "crop" around.

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',

    title: 'Drag your mouse over the image',
    width:710,
    height: 364,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'image',
                    src: 'http://www.searchenginepeople.com/wp-content/uploads/2011/12/Vancouver-Skyline.jpg'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Ext.onReady(function() {

    var f = new MyPanel({
        renderTo: Ext.getBody()
    });
    
    var referenceToImage = f.down('image').el.dom;
    
    $(referenceToImage).Jcrop();

});

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' ); Alternatively, if filters are configured with an id , then existing filters store may be replaced by new filters having the same id . Filtering by single field: store . filter ( "email" , /\.com$/ ); Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]); Using Ext.util.Filter instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , { property : "email" , value : /\.com$/ , root : 'data' }), Ext . create ( ' Ext.util.Filter ' , { filterFn : function ( item ) { return item . get ( &

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to

EXTJS - Way to get a reference to the viewport from any controller

An easy way to get a reference to the viewport from any controller Here's an easy way to get a reference to your viewport from any controller: Ext.application({ launch: function(){ this.viewport = Ext.ComponentQuery.query('viewport')[0]; this.centerRegion = this.viewport.down('[region=center]'); } }); then, inside say, a controller, you can call this: this.application.viewport to get a reference to the viewport.

JS Architect's

Search This Blog