Top Support Tips

June 29, 2016 107 Views

How to Copy and Paste Data from Your Components

by Alex Volfson

Users ask me how to copy and paste data from their components. Many components have a complex interaction model, so the default system copy is not always going to work. Using the clipboard plugin may seem complicated, but I’ll show you how to implement it for the tag field component. I’ll demonstrate how to copy and paste only selected tags.

Ext.plugin.AbstractClipboard expects two methods by default. The first is getTextData, which determines how you want the data copied to the system clipboard from the component. The second method putTextData determines how the paste action is handled by the component. With that in mind, I can extend the AbstractClipboard and have it work specifically for the tagfield component using this code:

Ext.define('myApp.plugins.TagsClipboard', {
    extend: 'Ext.plugin.AbstractClipboard',
    alias: 'plugin.tagclipboard',
    
    separator:", ", //this defines the symbol that will separate our values when copied to the system clipboard
    /*
     * Determines how data is sent to the clipboard on copy or cut
     */
    getTextData:function(){

        var cmp=this.getCmp(); //this is the tagfield
        var selected = cmp.selectionModel.getSelected(); //get only those that are selected
        var str = "";
        for (var x = 0, len = selected.items.length; x < len; x++) {
            str += selected.items.get(cmp.displayField) + this.separator
        }
        str = str.slice(0, - this.separator.length);
        return str;
    },
    /*
     * Determines how a paste is handled by the component
     */
    putTextData:function(data,format){
        var arrayValues = data.split(this.separator);
        var cmp= this.getCmp(),rec, records=[];
        //match each text to a record so you can use setvalue below
        for(var x=0, len=arrayValues.length; x<len; x++){
           rec=cmp.getStore().findRecord(cmp.displayField,arrayValues,0,false,false,true);
           if (rec) {
                records.push(rec);
           }
        }

        var combined = records.concat(cmp.getValueRecords());//combine with existing records
        
        cmp.setValue(combined);
        
        return data;
    },
    privates:{
        
         finishInit: function (comp) {
            var me = this;

            me.keyMap = new Ext.util.KeyMap({
                target: me.getTarget(comp),
                //ignoreInputFields: true, //needed to override this
                binding: [{
                    ctrl: true, key: 'x', fn: me.onCut, scope: me
                }, {
                    ctrl: true, key: 'c', fn: me.onCopy, scope: me
                }, {
                    ctrl: true, key: 'v', fn: me.onPaste, scope: me
                }]
            });

            ++me.shared.counter;

            comp.on({
                destroy: 'destroy',
                scope: me
            });
        },
    }
    
})

I could have removed the paste listener inside of finishInit as well and let the browser handle that. The only issue is that the tag field can only handle one tag on paste. If you had multiple tags in your clipboard, then the component would not understand how to handle it. All that is left to do is to add the plugin to the tagfield component:

       var shows = Ext.create('Ext.data.Store', {
            fields: ['id', 'show'],
            data: [{
                id: 0,
                show: 'Battlestar Galactica'
            }, ...]
        });

        Ext.create('Ext.form.field.Tag', {
            plugins:[{ptype:'tagclipboard',separator:' && '}],
            fieldLabel: 'Select a Show',
            store: shows,
            displayField: 'show',
            valueField: 'id',
            queryMode: 'local',
            filterPickList: true,
            
        });

Note that you can define the separator on each instance of the plugin. Have fun copying and pasting!

So You’re New to Ext JS and Like What You See – Now What?

by Scott Martin

Some time ago, I was introduced to Ext JS by a fellow developer, and right away I was ready to start using it. Just like any other framework that you get introduced to, there is always a learning curve. Where do you actually start? In the case of Ext JS, we provide excellent documentation with lots of details and examples to help you understand our framework. The challenge is that you may not know where to begin. For example, what files do you need to distribute your app?

I’ll describe how to generate a new application and get it ready for distribution in a few quick steps. Of course this is just a demo app, but you can see how quickly you can become productive.

Download and Install Ext JS and Sencha Cmd
If you are a Sencha customer, download Ext JS and Cmd from the Support portal. If not, download the Ext JS free trial. Unzip the framework at this location /path/to/extjs6 and install Sencha Cmd.

Generate / distribute a new app (using Sencha Cmd and Ext JS):

The following command will generate a new app using Sencha Cmd. This creates the scaffolding for your entire application, including our API.

I have selected the –classic option to make things a little easier. You can omit this if you plan to use the Modern and Classic toolkits in your new project.

> sencha -sdk ~/path/to/extjs6 generate app MyApp ~/path/to/myapp --classic

If you want to load your generate app, enter the following URL in your browser:
http://localhost/myapp/index.html

Note: The above URL is based on your local web server. If you do not have a web server installed, have a look at ‘sencha app watch’ using Cmd, and it will provide one for you.

You can access your app with our local Cmd web server using the following:

> cd ~/path/to/myapp
> sencha app watch
> http://localhost:1841/index.html

At this point, everything you need is in the generated DIR to begin developing your app.

The next thing you need is to build the app for distribution to your web server.

> cd ~/path/to/myapp
> sencha app build

Now, you have created a production-ready version of your application. All of the production files have been placed in the following path:
‘~/path/to/myapp/build/production/myapp/* ‘

It’s already compiled, compressed, and includes our API along with your code in a single file (app.js), along with index.html and resources/*

./build/production/myapp/*

To test this, you can load your app from the above DIR in your web browser:

Local web server:
http://localhost/myapp/build/production/myapp/index.html

Cmd web server:
http://localhost:1841/build/production/myapp/index.html

If you want to see what this entire file looks like uncompressed, you can build the app with a ‘testing’ argument. The following command will place all of the build files in ‘~/path/to/myapp/build/testing/myapp/* ‘.

If you open app.js in an editor, you can see the combined code. This is also helpful for providing a debug version of your app on the server, so you don’t have to copy all of the individual JS files.

> sencha app build testing

It’s as simple as that! All you need now is to load your favorite editor and start creating your own app.

For more information, please see:

Universal App Development

by Bryan Durham

With most application development, you will use sencha app watch to compile your application’s JavaScript. While this is sufficient for the vast majority of scenarios, developing a universal app will require more watch workers running in order to process the changes between the toolkits (or even additional builds).

For example, let’s say you’re developing a Login panel that is styled differently for the Classic and Modern versions of your application. You’ve already created the Classic version of this view and have started work on your Modern view. You’ve saved the files and have started your trusty “sencha app watch” from your command prompt. You point your browser to http://localhost:1841/?modern so you can see how it looks, but you get the “Some requested files failed to load” error.

Error - Some Requested Files Failed to Load

What gives? The files are there!

By default the app watch process detects and runs the first build profile defined in your app.json. If you want to watch for a separate build (i.e. modern or a special build), you can specify as a flag in the app watch command.