Sencha Test 2.1 GA

We’re excited to announce that Sencha Test 2.1 is now generally available. This release includes new features that greatly enhance your experience of creating tests, managing defects, and storing test results. Now, you can create tests simply by inspecting components on a web page and achieve an end-to-end automated workflow – from unattended execution using CI tools to logging defects on JIRA with our new integration. You have the flexibility of including external files, which opens up endless possibilities for testing outside of your application. With the help of a local archive server, Sencha Test ensures that manual test runs are retained for analysis and defect management. New features in Sencha Test 2.1: Inspect components and elements on Ext JS applications Execute tests from Sencha Studio and store test results on the local archive server Add external files or install npm modules and simply require them in test code Analyze test failures and publish bugs directly to JIRA Perform visual testing directly from Sencha Studio Join Us for Our Upcoming Webinar Learn more about Sencha Test 2.1 and see it in action. Register Now What’s New in Sencha Test 2.1 Date: Tuesday, May 23, 2017 Time: 10am PDT | 1pm EDT | 6pm BST Duration: 60 minutes

Ext JS 6.5 GA, Progressive Web Apps, Sencha Test Futures, and Ext JS Tips

	NEWSLETTER MAY 2017

Announcing Ext JS 6.5 and Sencha Cmd 6.5 GA by Don Griffin and Sandeep Adwankar Ext JS 6.5 and Sencha Cmd 6.5 enable you to deliver rich mobile and desktop experiences for your data-intensive, cross-platform web apps – using the Modern toolkit. See all the new features.  READ MORE

Creating Progressive Web Applications using SenchaExt JS  by Ajit Kumar We’ve made progressive web app development very easy with Ext JS. You can create a rich user experience and increase user engagement by delivering the best of both web and mobile apps. Learn how to create your PWA. READ MORE

Sencha Test Futures API for End-to-End Testing by Jon Jarboe, Don Griffin, Subu Baskaran Learn how to use a key feature of Sencha Test, the Futures API, which allows automation engineers to write tests targeting JavaScript components rather than depending on DOM elements.  READ MORE

Sencha Cmd 6.5 Tech Tips by Sandeep Adwankar Get started quickly with Sencha Cmd 6.5 key features including support for ECMAScript 2015 (or ES6), dynamic package loading, and building progressive web apps. Try the code samples in your apps. READ MORE

Ext JS Customer Spotlight: Crestone Digital by Mike Giddens Crestone Digital builds custom mapping solutions. The team uses Ext JS because it’s easy to create a full-fledged application in minutes, yet it’s designed with extensions in mind. READ MORE

Top Support Tips by Sencha Support Team Check out these Ext JS tips and learn how to scroll a component into view and customize a tree list component.  READ MORE

Sencha Test Tip: Execute Tests on Multiple Browsers Simultaneously by Subu Baskaran Sencha Test has built-in support to make it easy to run and debug tests on multiple browsers simultaneously using a browser farm. Join us for our upcoming webinar with Sauce Labs. READ MORE

Adding D3 visualizations to your Ext JS App Targeting Component Themes with UIs Getting Started with Sencha Test - Quick Start for Testers Learn Design Methods for Better Product Development

Upcoming Webinar: What's New in Sencha Ext JS 6.5 and Cmd 6.5 Presented by Jon Jarboe and Sandeep Adwankar Join us for our upcoming webinar, where you will learn how you can use Ext JS 6.5 to deliver rich desktop and tablet experiences for your data-intensive, cross-platform web applications – using the Ext JS Modern toolkit. With Cmd 6.5, you get support for ES2015 (formerly ES6) in Ext JS apps, dynamic package loading and support for Progressive Web Apps.  REGISTER NOW

Want Higher Quality & Faster Development Time? Sencha Professional Services has a team of experts that provides application modernization, code reviews, architecture planning, and custom development. Find out how we can help you. CONTACT US

Learn best practices from XH.IO for building beautiful, data-intensive web apps using Ext JS

Learn Best Practices for Building Web Apps with Ext JS from XH.IO

Learn how Extremely Heavy Industries successfully develops beautiful, data-intensive applications for desktop and mobile platforms using Ext JS. Join this webinar to see Anselm McClain, Partner and Developer at Extremely Heavy Industries, share his real-world development experience of using robust web development stacks. You’ll learn about: Best practices and challenges of developing high-performance JavaScript applications with a large code base. Building your own toolkit of custom components and code patterns to maximize application usability and consistency for end-users while enhancing productivity and encouraging code re-use for developers.  Improving the success of data-dense web applications through the visualization of information and the tight integration of traditional grid data with technologies such as D3. The session will include a review of a cross-platform demo trading application, and discuss how Ext JS is particularly well suited to data-intensive industries like asset management and financial services. Sencha will also provide a brief overview and demonstration of Ext JS, highlighting some of the 115+ high-performance, pre-tested and integrated UI components. Webinar Details: Thursday, May 11, 2017 10:00am PDT | 1:00pm EDT | 5:00pm GMT 60 minutes Featured Speakers:    Anselm McClain, Developer, Extremely Heavy Industries  Anselm has worked with Sencha frameworks for nearly ten years, in addition to programming in Java/Groovy and working with other core web technologies. He is a partner and developer at Extremely Heavy Industries, where he and the team apply their love of clean code, design, and usability to create data-intensive desktop and mobile web applications for clients, primarily in finance and trading. He lives in Northern California, but regularly bounces between CA and NY to visit ExHI's east coast office and clients. Jon Jarboe, Technical Marketing Manager, Sencha Jon is a Technical Marketing Manager at Sencha. His broad development experience, ranging from embedded systems to modern web and mobile applications, helps him to communicate the benefits and vision of Sencha technologies. Prior to joining Sencha, Jon held various technical roles at organizations that provide software development tools for embedded and enterprise applications.

Hyderabad Global Azure Bootcamp 2017

By Microsoft User Group Hyderabad

Event to be held at the following time, date, and location:

Saturday, April 22, 2017 from 9:00 AM to 4:30 PM (IST)

Microsoft India Development Center Building 3, MPR Halls 1, 2 & 3 Gachibowli Hyderabad 500081 India

DESCRIPTION

Check the agenda @ https://themugh.github.io/gabc2017. Studenst are not allowed for this event.

Register

Extjs - Loading Json data in Combo

In this post i am going to explain about the loading of the Jsoin data in combo Box.


Ext.onReady(function () {

    var JsonData = {
        'items': [{
            'name': 'Lisa',
            "id": "111"
        }, {
            'name': 'Bart',
            "id": "222"
        }, {
            'name': 'Homer',
            "id": "555"
        }]
    };

    var colors = new Ext.data.JsonStore({
        root: 'items',
        id: "colors",
        fields: ['id', 'name']
    });
    colors.loadData(JsonData);

    var entitySearchForm = new Ext.form.FormPanel({
        title: "Form loading with Json data",
        width: 425,
        frame: true,
        items: [{
            xtype: 'combo',
            fieldLabel: 'Role Selection',
            id: 'role',
            hiddenName: 'role',
            hiddenValue: 1,
            editable: false,
            emptyText: 'Please select a role',
            typeAhead: true,
            triggerAction: 'all',
            lazyRender: true,
            mode: 'local',
            displayField: 'name',
            valueField: 'id',
            store: colors
        }]
    });
    var entitySearchWindow = new Ext.Window({
        layout: 'anchor',
        closable: true,
        resizable: false,
        draggable: false,
        modal: true,
        items: [entitySearchForm]
    });
    entitySearchWindow.show();
});

Extjs loading FormPanel using Json Data

In this post i will explain about the loading the form with Json data.  Form panel having some fields like 3 textboxes on click of the button i will load the data.
Same time on click of clear button we can remove all text boxes values. The following example will show you how to do this.


Result:

Code:


Ext.onReady(function () {
    var entitySearchForm = new Ext.form.FormPanel({
        title: "Form loading with Json data",
        width: 425,
        frame: true,
        items: [{
            xtype: 'textfield',
            fieldLabel:'Name',
            allowBlank: false,
            name: 'name'
        }, {
            xtype: 'textfield',
            allowBlank: false,
            fieldLabel:'Location',
            name: 'location'
        }, {
            xtype: 'textfield',
            allowBlank: false,
            fieldLabel:'Department',
            name: 'department'
        }],
        buttons: [{
            text: "Load Data",
            listeners: {
                click: onbtnClick
            }
        }, {
            text: 'Clear',
            listeners: {
                click: onbtnClearClick
            }
        }]
    });

    var entitySearchWindow = new Ext.Window({
        layout: 'anchor',
        closable: true,
        resizable: false,
        draggable: false,
        modal: true,
        items: [entitySearchForm]
    });

    //Preparing the Json Data
    var record = {
        data: {
            name: 'Harikrishna',
            location: 'India',
            department: 'IT'
        }
    };

    function onbtnClick() {
        entitySearchForm.getForm().loadRecord(record);
    }

    function onbtnClearClick() {
        entitySearchForm.getForm().reset();
    }

    entitySearchWindow.show();
});

EXTJS3 JSON GRID

In last posts i explained about the Array grid and grouping grid. Now i will explain about the Json Grid.

Ext.onReady(function () {
    var Grid1Store = new Ext.data.JsonStore({
        root: 'users',
        fields: ['id', 'name', 'email'],
        //autoLoad: true,
        data: {
            users: [{
                "id": 1,
                "name": "John Smith",
                "email": "jsmith@example.com"
            }, {
                "id": 2,
                "name": "Anna Smith",
                "email": "asmith@example.com"
            }, {
                "id": 3,
                "name": "Peter Smith",
                "email": "psmith@example.com"
            }, {
                "id": 4,
                "name": "Tom Smith",
                "email": "tsmith@example.com"
            }, {
                "id": 5,
                "name": "Andy Smith",
                "email": "asmith@example.com"
            }, {
                "id": 6,
                "name": "Nick Smith",
                "email": "nsmith@example.com"
            }]
        }
    });

    var onReadyFunction = function () {

        var grid = new Ext.grid.GridPanel({
            renderTo: Ext.getBody(),
            frame: true,
            title: 'Database',
            width: 500,
            height: 300,
            store: Grid1Store,
            columns: [{
                header: "Id",
                dataIndex: 'id'
            }, {
                header: "Name",
                dataIndex: 'name'
            }, {
                header: "Email",
                dataIndex: 'email'
            }]
        });

    }
    Ext.onReady(onReadyFunction);

});

Extjs3 Grouping grid

In last post  explained about the Array grid and how to use arrayStore and how to bind the data to grid. Now i will explain about the Extjs3 Grouping grid.

Following code having the the some static dummy data and Store grid.

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xg = Ext.grid;


    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

    var store = new Ext.data.GroupingStore({
            reader: reader,
            data: xg.dummyData,
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        });

    var grid = new xg.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
            {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),

        frame:true,
        width: 700,
        height: 450,
        collapsible: true,
        animCollapse: false,
        title: 'Grouping Example',
        iconCls: 'icon-grid',
        fbar  : ['->', {
            text:'Clear Grouping',
            iconCls: 'icon-clear-group',
            handler : function(){
                store.clearGrouping();
            }
        }],
        renderTo: document.body
    });
});



// Array data for the grids
Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
    ['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
    ['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
    ['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
    ['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
    ['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
    ['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
    ['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
    ['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
    ['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
    ['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
    ['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']

];

Source from sencha