New features in Sencha Ext JS 6.6

Sencha Ext JS 6.6. This release includes several major enhancements as well as support for npm packaging and open tooling for exceptionally easy workflows that every JavaScript developer is familiar with. With open tooling, Ext JS developers now have powerful tooling to rapidly generate, build and update Ext JS applications. 

New features in this release include: 

• Ext JS npm Packages – Ext JS standard and premium components, themes and framework are now available in npm packages hosted on the Sencha npm repository
• ExtGen – New open tool that lets you generate new Ext JS apps by asking you a series of questions and provides you with a number of new app templates
• ExtBuild – New open tooling to build and transpile your apps
• New modern components – Modern time field and time panel component that provides an analog time view based on material design specification
• New beautiful Graphite theme that makes your accessible apps visually stunning 
• Localization support for modern applications 
• Dynamic Styling of applications using Material Theme 
• Advanced Ext JS routing enhancements
• Enhanced gauges component with improved ability to display interval values

Try Ext JS 6.6 with Open Tooling

• Download the free 30-day trial of Sencha Ext JS 6.6 with open tooling 
• Read the getting started with Ext JS npm and Open Tooling guide
• Learn about all new Ext JS npm packages

Try Ext JS 6.6 with Cmd 6.6

• Download the free 30-day trial of Sencha Ext JS 6.6
• Download Cmd 6.6.0
• Read the guides and documentation
• View the Ext JS 6.6 examples on any device 

– The Sencha Team

Resource: From Sencha 

ES6 - Arrow function with Array prototype find()

Hi Folks,

Today we are going see Arrow function using find() in Javascript.

find() method search the array of objects  and returns the value of the first element in the array that satisfied condition otherwise it will return undefined

Using this find() we should not to loop the entire object and it will give the result very fast compare to traditional looping.

Example:

var empData = [{"name":"Nookala",  "age": 30},
              {"name":"Gunti",  "age": 27},
              {"name":"Teki", "age": 25 },
              {"name":"Yennam", "age": 42 }];


Now are going to search positive scenario

var result = empData.find(o => o.name === "Nookala");

Result will be

If There is no data in object.

Source: ECMA

How to make ExtJS Grid cell text selectable for Copy

Hi Folks,

In ExtJS Grid we have a config option to select the cell text selection, by default this option is false,
we have to make this config option to make it as true, then our ExtJs grid cell text as selectable.

viewConfig: {

                 enableTextSelection: true

             }

How to add SSL host in Eclipse

Hello Folks,

Now going to explain a stage issue which i got today while working with git repository using Eclipse Oxygen IDE. Issue is  Egit unable to clone shared repository.

Even though having all permissions to clone the project from git in Eclipse IDE every time I got message like "401 Authorization required ". Worked on couple of hours what is the issue searched on eclipse forums but no luck, finally got to know that from solution architect this is kind issue you may get if SSL host is not allowing you.

Then we added this configuration in eclipse,  These are steps to overcome the issue.

Eclipse Preferences -> Team -> Git -> Configuration -> User Settings -> add Entry.

Add key as  http.sslVerify and false as Value -> apply and Ok.

Webinar: Learn How Ext JS Fits into Your Open Source Strategy

You're invited to join our webinar on May 10th at 10am PDT/1pm EDT, "Learn How Ext JS Fits into Your Open Source Strategy." You will learn how to easily add any of our 115+ professionally tested and supported Ext JS components including grid, tree grid, pivot grid, charts, D3 visualizations, trees, calendar, buttons, menus and more to your React or Angular apps. Attend this webinar and you will learn how to:  Build data-intensive, cross-platform web apps leveraging Ext JS components with React or Angular (and perhaps others) Build immersive user engagement using layouts and adaptive design features Leverage material design and other themes to save time and effort. Modify or extend themes without writing a single line of code Join us and you will also get a sneak peek into plans for NPM and webpack tooling for Ext JS. Event Details: Date: Thursday, May 10, 2018 Time: 10:00am PDT / 1:00pm EDT / 6:00pm BST Duration: 60 Minutes

Register Now

Speaker: Marc Gusmano   Marc is a Solutions Architect with Sencha and is passionate about building outstanding software, especially leading-edge, user-centric applications. He has more than 30 years of experience in the software services industry, and has been extensively involved with custom HTML5 browser and mobile development projects, using his experience to build HTML5 Single Page Applications.

Early Access for Sencha Plugin for Visual Studio 2017 is Now Available

Sencha Plugin for Visual Studio 2017 Early Access

Sencha  announced the early access version of the Sencha Plugin for Visual Studio 2017 is now available. Sencha Visual Studio Plugins were created with the goal of streamlining the development process for Sencha Ext JS developers using Visual Studio IDEs and to help developers build their applications faster. Try the following features: Quickly create new web application projects for Sencha Ext JS frameworks with a starter template Easily add Ext JS app, Ext JS classes (view, model, controller, store), Ext JS workspaces and view packages Easily integrtae with build and debugging tools by watching source code changes and rebuilding using Sencha Cmd Easily navigate code b clicking on references and go to definition for class name, xtypes, config keys, events and more IntelliSense support for Ext JS Read the blog for more information or download now.  Try the Sencha Plugin for Visual Studio 2017 early access version and tell us what you think by completing a short survey. You can also share your feedback in the Visual Studio Plugin forum.  – The Sencha Team

Download

Sencha ExtJS how to select Grid First row

In ExtJs Grid we can select the first row when the grid is loaded.

Sencha Extjs grid. we can do it  as store load callback like this.

Now am getting the grid from my view.

  var myGridstore = this.getViewModel().getStore('myStore');

     var myGrid = this.getView().down('grid');

     myGridstore.load({

                    callback: function(records, operation, success, response) {

                    if(success){

                    //Grid row index start from Zero.

                    myGrid.getSelectionModel().select(0);

                    }

                    }});

Sencha Extjs What is the use of Ext.beforeLoad in index.html

In Extjs we have  Ext.beforeLoad  method in sencha cmd generated file index.html.

We have to know what is the purpose of Ext.beforeLoad.

This function is called by the Microloader after it has performed basic device detection. The results are provides in the tags object are.

android: 0

androidstock: 11

bada: 0

blackberry: 0

chrome: 0

chromeios: 0

chromemobile: 0

chromeos: 0

cordova: false

desktop: true

dolfin: 0

edge: 0

firefox: 0

ie: 0

ie8: 0

ie8m: 0

ie8p: 0

ie9: 0

ie9m: 0

ie9p: 0

ie10: 0

ie10m: 0

ie10p: 0

ie11: 0

ie11m: 0

ie11p: 0

ie12: 0

ie12m: 0

ie12p: 0

ios: 0

ipad: 0

iphone: 0

ipod: 0

linux: 0

mac: true

opera: 0

phone: false

phonegap: false

rimtablet: 0

safari: 11

silk: 0

tablet: false

tizen: 0

touch: undefined

webos: 0

webosbrowser: 0

webview: false

windows: 0

windowsphone: 0

         use these tags here or even add custom tags. These can be used by platform
        filters in your manifest or by platformConfig expressions in your app.

Ext.beforeLoad = function (tags) {

            var s = location.search,

                profile;

            if (s.match(/\bclassic\b/)) {

                profile = 'classic';

            }

            else if (s.match(/\bmodern\b/)) {

                profile = 'modern';

            }

            else {

                profile = tags.desktop ? 'classic' : 'modern';

                //profile = tags.phone ? 'modern' : 'classic';

            }

            Ext.manifest = profile;

        };

Sencha Extjs how to find deviceType

This is very useful while working on responsive applications, some places we need to know the what is DeviceType and operating system like that.

Extjs came with os singleton class  Ext.os

Provides information about the current operating system environment.

Like below:

1. 
   deviceType:"Phone"
2. name:"Android"
3. version:Version
1. build:0
2. major:5
3. minor:0
4. pad:0
5. parts:(2) [5, 0]
6. patch:0
7. releaseValue:0
8. shortVersion:"50"
9. version:"5.0"

Sencha Extjs How to make textfield as password field

Today am going to tell basic thing how to make textfield like as a password field.

We have predefind component for modern but not for classic  so we have to make with inputType config.

writing at the time of field declaration. using inputType config.

        xtype: 'textfield',

        name: 'password',

        msgTarget: 'under',

        allowBlank: false,

        labelSeparator: '',

        fieldLabel: 'Password',

        maxLength: 16,

        enforceMaxLength: true,

        reference: 'password',

        inputType: 'password'

Sencha Extjs online training

ngHyderabad February Chapter

3FEB

Saturday, February 3, 2018

ngHyderabad February Chapter

Details

NativeScript Angular by Shiva Prasad, an Angular evangelist and Native Script contributor.

Writing cross-platform mobile apps is not as easy as it may seem. On one hand, it can save money to use a JavaScript-based cross-platform mobile framework. But on the other hand, we'd like to be able to give app users the speed and elegance of a native app.

NativeScript is one such cross platform framework which let's us have the best of both worlds. The UI will be converted to truly native mobile UI, on Android and iOS, while still letting us seamlessly access native API using JavaScript / TypeScript. NativeScript provides day 0 access to 100% of the NativeAPI. What's more, you can even do code sharing between your Web and Mobile application.

Join us as we'll uncover more of the awesomeness of NativeScript.

More about the presenter here https://about.me/multishiv19

Talk 2 - Boost Angular Application Performance by Pankaj Parkar. Discuss considerations and best practices for better performing Angular applications. Pankaj is one of the top contributor on Stack Overflow. Currently, he is top 5th user for AngularJS and top 10th user Angular 2+ tags on Stackoverflow. He is a Microsoft MVP and a tech enthusiast.

Time:

Saturday, February 3, 2018
11:00 AM to 3:00 PM

ThoughtWorks

3rd Floor, Apurupa Silpi, Beside H.P. Petrol Bunk, KFC Building, Rajiv Gandhi Nagar, Gachibowli, Hyderabad, Telangana · Hyderabad.

Facebook's India Innovation Hub

Hi everyone, join us on 23rd February for the launch of Facebook's India Innovation Hub Accelerator Program, in collaboration with T-Hub. Stay tuned for more amazing work happening in AR/VR space. 

Register here:
https://forms.zohopublic.com/THub/form/FBdayregistration/formperma/LzRepE9tQj7k2rSxesKdmP_e3ox0xxUqa1k3Sbevj8U

What is Vue.js

Hi,

Today we are going to learn New JavaScript framework as Vue.js.

What is Vue.js?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.

If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

Vue.js is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features.


Source from Vue

Show Hide Password field using Extjs

Hello,

Today,  I would like to write a small example of How to show or hide the password filed using Sencha Extjs.

It is very simple just we have to write make the input type changes like a password to text or text to the password.

Example:

Ext.tip.QuickTipManager.init();

Ext.create('Ext.form.Panel', {

    items: {

        xtype: 'fieldcontainer',

        width: '100%',

        layout: {

            type: 'hbox'

        },

        items: [{

            width: '90%',

            xtype: 'textfield',

            name: 'password',

            msgTarget: 'under',

            allowBlank: false,

            fieldLabel: 'Password' + '<span style="color:red">*</span>',

            inputType: 'password'

        }, {

            xtype: 'button',

            iconCls: 'fa fa-eye',

            tooltip: 'Show password',

            handler: function (button) {

                var isShowPassword = this.iconCls==='fa fa-eye';

                this.setTooltip(isShowPassword?'Hide password':'Show password');

                this.setIconCls(isShowPassword?'fa fa-eye-slash':'fa fa-eye');

                this.prev().getEl().query('input', false)[0].set({'type':isShowPassword?'text':'password'})

            }

        }]

    

    

    },
renderTo: Ext.getBody()
});

OutPut:

Angular 5 has been released

Angular 5 has been released

Angular 5 was finally released after several delays, November 1, 2017. It was also accompanied by Angular CLI 1.5. This is a major release and in line with Angular team promise of major releases twice a year. It focusses on making Angular application smaller, faster and easier to use.

React 101

Details

Women Techmaker, Hyderabad and GDG Hyderabad is collaborating for the 1st time with THub and Coderplex community to provide a platform for all the developers in Hyderabad to learn, share and network. This platform is for developers who are interested in Google's developer technology; everything from the Android, Chrome, Drive, and Google Cloud platforms, to product APIs like the Cast API, Maps API, and YouTube API.

About this event :

This event is primarily on React Js. React is a front-end library used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries.

Session will be followed by showcasing some of the work the community members have done this year.

Who is eligible for this event:

This event is open to all but a confirmation we will sent to the selected members. Even thought it doesn't use HTML we still recommend basic understanding of Javascript, HTML5, CSS3. Knowledge of these will make this session more useful to you.

Register

Join Us Virtually at CodeRage XII - November 7-9

REGISTER NOW Join Us at CodeRage XII

Join us at Embarcadero’s 12th annual virtual developer conference, CodeRage XII, November 7-9 from 6am - 5pm CST. This completely free, three day conference is your source for the latest on development tools and technical deep dives, best practices from industry thought leaders, emerging technologies and platforms.

REGISTER NOW

Our very own Sandeep Adwankar, Product Manager at Sencha, will lead an Introduction to Sencha Products session, focusing on Ext JS, Tools, Test, ExtReact and GXT on Wednesday, November 8th at 12:00pm CST. Additionally, Marco Cantu, author of the Mastering Delphi series, will lead an Introduction to Ext JS for Delphi Developers session on Tuesday, November 7th at 11:00am CST. We hope you will join Sandeep and Marco to learn more about Sencha! If you're interested in learning more about Embarcadero's RAD Studio products, you can see the full list of sessions here. Here's a few other notable standouts speaking at CodeRage XII we thought you might find interesting:  Robert C. "Uncle Bob" Martin, author of Clean Code: A Handbook of Agile Software Craftsmanship, is speaking on, "The Clean Coder - An Introduction to Software Professionalism" Steven McConnell, author of "Code Complete", is speaking on "Managing Technical Debt" Ray Konopka, author of "Developing Custom Delphi Components", shares his "IDE Productivity Tips & Tricks" Cary Jensen, author of "Delphi in Depth: FireDAC", speaks on "FireDAC in Depth: Creating and Using Indexes" We hope you'll join us virtually this week – register for free today to save your seat!  – The Sencha Team

Join Us at CodeRage XII November 7-9, 2017 REGISTER NOW

This webinar meets 3 times.

1. Tue, Nov 7, 2017 5:30 PM - Wed, Nov 8, 2017 5:30 AM IST
2. Wed, Nov 8, 2017 5:30 PM - Thu, Nov 9, 2017 5:30 AM IST
3. Thu, Nov 9, 2017 5:30 PM - Fri, Nov 10, 2017 5:30 AM IST

Show in My Time Zone

---

It is time for your favorite online developer conference: CodeRage. This year for CodeRage XII we are adding more platforms, more technology, and more learning. Join us for 3 full days November 7th through 9th. This email is for room 1. You will be automatically registered for Room 2 as well. To join it, use this link: https://attendee.gotowebinar.com/register/3652503247131146241 (You only need to register for once and you are registered for everything!) More information: http://thecoderage.com https://www.embarcaderoacademy.com/p/coderage-xii Less