Month: May 2013

Problem Statement In a typical Sencha ExtJS based enterprise

Image

Problem Statement

In a typical Sencha ExtJS based enterprise project, we create various JS+CSS files and it becomes cumbersome to manage them during the development because they need to be listed in the proper order in the index.html file and for every addition of a file, we need to add it to the index.html, as well. After the development is done, we minify all the JS and CSS files to have better loading performance, and go back and modify the index.html file to use the minified files rather than individual files. After introduction of the new Class System in ExtJS this tedious task has been taken care by the framework and the developer is not required to do all that, anymore. This is a big relief. However, the new Class System expects a specific folder structure so that it can load the classes, dynamically, and is based on the MVC architecture. To make this managing of folder structure effortless and leverage the same for the minification, Sencha has provided a tool – Sencha Cmd. So, as long as you plan to use the MVC architecture offered by Sencha ExtJS, Sencha Cmd is a must tool to create, build and package your application.

Scope of the article

This article provides you steps to set up Sencha ExtJS project using Sencha Cmd with an example to create a registration form. The article will cover how we can generate a skeleton application using Sencha Cmd, how we create entities – model, view, controller, and store, and how we can build the application to get the minified JS and CSS out.

Pre-requisites:

  1.  Java Run-time Environment 1.6  or above
  2. ExtJs 4.1.1a or above
  3. Sencha Cmd 3.0 or above

Step 1: Install Sencha Cmd

1)  Extract the zip and double click on .exe file.

2) After running the command, you must see similar type of suggestions

Image

Click on Next> button

Image

After successful installation, it shows below message.

Image

Click on Finish button

3) Once all the above steps are done successfully, go to command line and enter command “sencha”. You must see suggestions for command as shown below.

Image

Step 2: Generate project structure using Sencha Cmd: 

1) Create sample Sencha ExtJs project structure with following command.

sencha -sdk /path/to/ExtJssdkFolder generate app MyAppName /path/to/MyAppFolder

2) Project structure generated by above command will have the following structure:

Image

Step 3: Create sample model, view and controller using Sencha Cmd:

1)  Go to project path and create sample controller through Sencha Cmd.

sencha generate controller Main

With above command, it should create controller with name Main

Ext.define('extjsExample.controller.Main', {

 extend: 'Ext.app.Controller'

});

2)  Create Model using following command

sencha generate model Server name:string

With above command, it will create model with name Server and with field name and type as string

Ext.define('extjsExample.model.Server', {
 extend: 'Ext.data.Model',
 fields: [

 { name: 'name', type: 'string' }
]
});

3)  Create sample view using following command (ExtJs Specific. Doesn’t work for touch )

sencha generate view Registration

Above command will create a sample view with name specified.

Ext.define("extjsExample.view.MyCmdView", {
 extend: 'Ext.Component',
 html: 'Hello, World!!'
});

Note: No other parameters available for creating view and controller except name.
Note: We cannot create store using Sencha Cmd.

Step 4: Create a registration form:

  1. Edit app.js and add registrationform xtype in viewport as an item.
Ext.application({

controllers: ["Main"],

views: ['Registration'],

requires:['extjsExample.view.Registration'],

name: 'extjsExample',

launch: function() {

Ext.create('Ext.container.Viewport', {

items: {

xtype: 'registrationform'

}
});
}

});

2. Create a view file with name Registration in app/view folder.

Sample code:

Ext.define("extjsExample.view.Registration", {

 extend: 'Ext.Container',

 xtype: 'registrationform',

 requires:['Ext.layout.container.Card','Ext.form.field.ComboBox',

 'Ext.form.field.Text'],

renderTo: Ext.getBody(),

width: 500,

 height: 200,

 initComponent : function() {

 var me = this;

 var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.apply(me, {

 ltems: [{

 xtype: 'form',

 frame: true,

 title: 'Registration Form',

 bodyPadding: '10 10 0',

 defaults: {

 anchor: '100%',

 allowBlank: false,

 msgTarget: 'side',

 labelWidth: 120

 },

items: [{

 xtype: 'textfield',

 name: 'username',

 emptyText: 'Enter User Name / Mail id',

 afterLabelTextTpl: required,

 fieldLabel: 'User Name/Mail Id'

 },{

 xtype: 'textfield',

 name: 'password',

 inputType: 'password',

 afterLabelTextTpl: required,

 emptyText: 'Enter Password',

 fieldLabel: 'Password'

 },{

 xtype: 'textfield',

 name: 'retype-password',

 inputType: 'password',

 afterLabelTextTpl: required,

 emptyText: 'Re-Enter Password',

 fieldLabel: 'Re-Enter Password'

 },{

 xtype: 'combo',

 name: 'server',

 allowBlank : true,

 fieldLabel: 'Server',

 store: Ext.create('extjsExample.store.Server'),

 displayField: 'name',

 editable: false,

 valueField: 'name'

 }],

buttons: [{

 text: 'Ok',

},{

 text: 'Cancel',

 handler: function() {

 this.up('form').getForm().reset();

 }

 }]

 }]

 });

 me.callParent(arguments);

 }

});

3)  In the example, to show content in combobox,  store was specified. Hence, Create a store, with the name Server, which is specified in the combo box’s store.

Sample Code:

Ext.define('extjsExample.store.Server', {

 extend : 'Ext.data.Store',

 requires:['extjsExample.model.Server'],

model: 'extjsExample.model.Server',

 storeId : 'server',

 proxy: {

 type: 'ajax',

 url: 'data/server.json',

 reader: {

 type: 'json',

 root: 'data'

 }

 }

});

4)  In above code, proxy was set and data is being retrieved from JSON file. So create a JSON file in data folder.

Sample JSON data:

{"data":[{"name":"Buddha"},{"name":"Zorba"},{"name":"Ashoka"}]}

Run the application:

Now, run the application in your server. You should be able to see the registration form view similar to following output.

Image

Click on dropdown to see JSON data.

Image

Step 5: Packaging Application:

Packaging decreases the loading time of your application. Here are the steps to package your app using Sencha Cmd.

Go to your project folder and execute the following command.

sencha app build production

Once, above command was executed, it should create a build folder in main project structure.

The structure looks like:

Image

all-classes.js contains the whole code related to application. You can run the application by navigating browser to packaged location.

Summary: This article has provided steps to create and build Sencha ExtJS project using Sencha Cmd with an example to create a registration form.

References:

Source:

http://blogs.walkingtree.in/2013/04/09/create-build-sencha-extjs-project-using-sencha-cmd-3/

How to Install a .run File

For this How To I am going to be using the dummy name “example.run”. You should replace this with the name of the file you are trying to install.

1. Open a terminal. In Gnome the terminal is found in Applications>Accessories>Terminal.
2. Navigate to the directory of the .run file. For this example, I have mine on the desktop so I would type in “cd ~/Desktop” and press enter.
3. Type “chmod +x example.run” (press enter).
4. Now type “./example.run”, press enter, and the installer will run.     

Creating Tooltip for Text Field in Extjs

This is the snippet

{
    xtype: 'textfield',
    anchor: '100%',
    name: 'Alamat',
    fieldLabel: 'Alamat',
    emptyText: 'Alamat',
    listeners : {
       render: function(p) {
            var theElem = p.getEl();
            var theTip = Ext.create('Ext.tip.Tip', {
                html: 'Tuliskan nama jalan dan nomor rumah.<br>Misal: Jl. Merak, No. 3',
                margin: '0 0 0 200',
                shadow: false
            });
           
            p.getEl().on('mouseover', function(){
                theTip.showAt(theElem.getX(), theElem.getY());
            });
           
            p.getEl().on('mouseleave', function(){
                theTip.hide();
            });
        }
    }
},

Step by Step Laravel for Dummy (1)

😀 The tittle said Step by Step Laravel for Dummy. Well… I am new to Laravel. I am learning Laravel and I want to share something for dummy just like me.

Sure, first we must know what is Laravel? In Laravel page, I found description about them self; Laravel is a clean and classy framework for PHP web development.

And You may have another question, why Laravel? Well… For me coding is fun. Coding just like game for me. So no matter framework is, I will learn about it. But wait… I like laravel because it use PHP 5.3. 🙂

I will not tell you more about Laravel. Let we begin to use it;

1. Just grab Laravel bundle on the web and extract it wherever you want.
In this case, I extract in my home folder; /home/kenzominang/mylaravel
2. Setup virtual host for mylaravel
– Just go to folder /etc/apache2/conf.d/ and create a new file. Ex; mylarafel.conf
<VirtualHost 127.0.0.9>
    DocumentRoot "/home/kenzominang/mylaravel/public" ServerName linmas
        <Directory "/home/kenzominang/mylaravel/public">
            Options Indexes FollowSymLinks MultiViews
            AllowOverride all
        </Directory>
</VirtualHost>
– Open /etc/hosts and add this line below
127.0.0.10 mylaravel
3. Restart apache to make it work
$ sudo /etc/init.d/apache2 restart

php_value safe_mode off