পৃষ্ঠাসমূহ

Search Your Article

CS

 

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

  • 📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.

  • 💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.

  • 🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.

  • 🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.

    ✔ Latest world News 

     

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Pageviews

Friday, February 17, 2017

Ext.js - Localization

It is always best to communicate users in the language they understand and prefer. Extjs localization package supports over 40 languages like German, French, Korean, Chinese etc. It is very simple to implement the locale in ExtJs.You’ll find all of the bundled locale files in the override folder of the ext-locale package.
Locale files are just overrides that tell Ext JS to replace the default English values of certain components.
This program is to show month in different locale to see the effect, try the following program:
<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>
      <script type="text/javascript">
          Ext.onReady(function() {
         var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
         var ds = Ext.create('Ext.data.Store', {
            fields: ['month'],
            remoteSort: true,
            pageSize: 6,
            proxy: {
               type: 'memory',
               enablePaging: true,
               data: monthArray,
               reader: {type: 'array'}
            }
         });
         Ext.create('Ext.grid.Panel', {
            renderTo: 'grid',
            id : 'gridId',
            width: 600,
            height: 200,
            title:'Month Browser',
            columns:[{
               text: 'Month of the year',
               dataIndex: 'month',
               width: 300
            }],
            store: ds,
            bbar: Ext.create('Ext.toolbar.Paging', {
               pageSize: 6,
               store: ds,
               displayInfo: true
            })
         }); 
         Ext.getCmp('gridId').getStore().load();
      });
      </script>
   </head>
   <body>
      <div id="grid" />
   </body>
</html>
This will produce following result:
Description:
For Using different locale other than English we would need to add the locale specific file in our program here we are using https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js for French. You can use different locale for different language such as https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js for korean etc.
This program is to show date picker in Korean locale to see the effect, try the following program:
<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>
      <script type="text/javascript">
          Ext.onReady(function() {
         Ext.create('Ext.picker.Date', {
            renderTo: 'datePicker'
         });
      });
      </script>
   </head>
   <body>
      <div id="datePicker" />
   </body>
</html>
This will produce following result:
Below are the few locales available in ExtJS and the main file locale URL to be changed.
Locale Language Locale URL
ko Korean https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr French https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
es Spanish https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
ja Japanese https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
it Italian https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ru Russian https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN Simplifies Chinese https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-zh_CN.js
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)