Category Archives: Ext-JS

Ext-JS

Extjs 4, Hide drop down menu box?

Now I am testing and learning ExtJs4 to use for my new project.

But so far, I do not feel very much that I need move to ExtJs 4 :p

Anyway it is developer’s destiny to follow new version and new trend @..@

While testing, I found a ridiculous happening.

I can not hide my drop down menu box @.@

When I click the button on the tool bar, the menu opens up and stay open.

So, I had to click off to hide drop down menu box. @.@

Hire is my tool bar code,

{
    xtype: 'toolbar',
    itemId : 'mainMenu',
    items: [
    {
        text : 'Main Menu 1',
        menu : {
        xtype: 'menu',
        items : [
            {
		    xtype: 'button',
		    text: 'Contacts',
		    itemId : 'extjs'
            },{
		    xtype: 'button',
		    text: 'Orders',
		    itemId: 'extjs2'
            }
        ]
        }
    },{
        text : 'Main Menu 2',
        xtype : 'button',
        itemId : 'extjs3'
    }
    ]
}

Solution,

I hook events and add hide code into the menu controller.

this.control({
    '#mainMenu *': {
	click : function(obj){
	    // codes
	}
    },
    "#mainMenu menu" : {
	'mouseleave' : function(menu){
	    menu.hide();
	},
	'click' : function(menu){
	    menu.hide();
	}
    }
});
Posted in Ext-JS, Tech Note | Tagged , , , | 2 Comments

[Extjs] Singleton example

var singleton = Ext.extend(Object, {
	_instance : null,
	constructor : function(){
		console.log("Singleton constructor called : "+this.getInstance());
	},
	getInstance : function() {
		if (this._instance == null){
			this._instance = this.createInstance();
		}
		return this._instance;
	},
	createInstance : function() {
		return 10;
	}
});

Reference :
http://www.slideshare.net/rohan.chandane/sencha-extjs-object-oriented-javascript

Posted in Ext-JS, Tech Note | Tagged | Leave a comment

Let’s a little customize messageBox button text

// Default YESNOCANCEL message box

Ext.Msg.show({
	title : 'Message Box',
	msg : 'Select one of options',
	buttons : Ext.MessageBox.YESNOCANCEL,
	icon : Ext.MessageBox.QUESTION,
	fn : function(btn) {
		if(btn == 'yes'){
			alert('You clicked Yes');
		}else if(btn == 'no'){
			alert('You clicked No');
		}
	}
});

// Customize Button text

Ext.Msg.show({
	title : "There is a Pending RMA with this order.",
	msg : "We found Pending RMA with this order, do you want to make new RMA or edit pending RMA?",
	buttons : {yes : 'My Custom Yes', no : 'My Custom No', cancel : 'My Custom Cancel'},
	icon : Ext.MessageBox.QUESTION,
	fn : function(btn) {
		if(btn == 'yes'){
			alert('You clicked Yes');
		}else if(btn == 'no'){
			alert('You clicked No');
		}
	}
});

MessageBox Icons :

Ext.MessageBox.INFO
Ext.MessageBox.QUESTION
Ext.MessageBox.WARNING
Ext.MessageBox.ERROR

Update for Extjs 4.x

Ext.Msg.show({
    title : "Custom Button Test for Extjs 4.x",
    msg : "Thank you for visiting my blog.",
    buttonText: {
        ok     : "My OK",
        cancel : "My Cancel",
        yes    : "My Yes",
        no     : "My No"
    },
    buttons : Ext.MessageBox.YESNOCANCEL,
    icon : Ext.MessageBox.QUESTION,
    width : 400,
    fn : function(btn) {
        if(btn == 'yes'){
            alert('You clicked Yes');
        }else if(btn == 'no'){
            alert('You clicked No');
        }
    }
});
Posted in Ext-JS, Tech Note | Tagged , , , , | 2 Comments

Select Grid Row by value

storeLen = rmaListGrid.store.getCount();

for(var i=0; i < storeLen; i++) {

   if(amazonOrderId == rmaListGrid.store.getAt(i).get('amazonOrderId').trim()){

	   rmaListGrid.getSelectionModel().selectRow(i);
	   
	   // this call rowClick event which defined on grid listeners
	   // ex) 'rowClick' : function(grid, rowIndex, e){
	   rmaListGrid.fireEvent('rowClick',rmaListGrid,i, rmaListGrid.store.getAt(i));
			  
	   break;
   }
}
Posted in Ext-JS, Tech Note | Tagged | Leave a comment

How to use Multiple Json Data in JsonStore?

I don’t know the title is right to expression or not. :)

Anyway, the problem is like this,

I want to draw grid also I want to show the updated data date into bbar.

And I want to do this job in only single Ajax request.

Firstly, in server side, Make json data like this ,

{“totalCnt”:95,”lastUpdate”:”2011-08-01 09:20:03.000″,”content”:[{“item-name”:”MURRAY MP220GF 20-Amp 2 Pole 240-Volt Ground Fault Circuit Interrupter”,”item-description”:”Type: MP-GT(Ground Fault) Number …

Secondly, let’s cook with that,

Key : We can get the field value using this way:

this.reader.jsonData.totalCnt;

this -> stroe

totalCnt -> field

var itemListStore = new Ext.data.JsonStore({
	id : 'itemListStore',
	proxy : new Ext.data.HttpProxy({
		url : 'uniapple.net/requestAjax.php',
	}),
	root : 'content',
	fields : [
		{name : 'item-name', type : 'string'},
		{name : 'listing-id', type : 'string'},
		{name : 'seller-sku', type : 'string'},
		{name : 'price', type : 'float'},
		{name : 'quantity', type : 'int'},
		{name : 'open-date', type : 'string'},
		{name : 'asin1', type : 'string'},
	],
	autoLoad: true,
	listeners : {
		load : function(){
			var totalCnt = this.reader.jsonData.totalCnt;  // !!!!!!!!!!!!!!!!!!!!!!!!!!
			var lastUpdated = this.reader.jsonData.lastUpdate; // !!!!!!!!!!!!!!!!!!!!!!!!!!
			lastUpdated = Ext.util.Format.substr(lastUpdated,0,19);

			var itemListBbar = Ext.getCmp('itemListBbar');
			itemListBbar.add({html : ':: Total : '+totalCnt+'    /   :: Last Updated : '+lastUpdated});
			itemListBbar.doLayout();
		}
	}
});

Posted in Ext-JS, Tech Note | Tagged , | 1 Comment

[Ext-JS] How to use checkbox in your grid?

I was searching google how to use checkbox in my grid.
but every solution was too complicated for me. (My brain is too simple…@.@)
So, I tried my way… simple..^^ easy..^^



// add a column for checkbox and set renderer for grid checkbox

var itemGridColModel = new Ext.grid.ColumnModel([
	{id : 'Ch', header : '-', dataIndex : 'ASIN', renderer : makeCheckBox, width:30},
	.
	.
	.

// Renderer function

function makeCheckBox(val){
	//name is an array
	return "";
}

Now you can see the checkbox!

Then, how to get the values for row fields, values and chexkbox value?

items : [
	{
		text : 'Set Tracking #',
		listeners : {
			click : function(){
				var check = document.getElementsByName('check[]');
				var checkLength = check.length;

				for(var i=0; i < checkLength; i++){
					if(check[i].checked){
						alert(check[i].value); //it will show checkbox value!
						
						//you can get the row field values too!
						var store = Ext.getCmp('itemGrid').getStore();
						var SKU = store.getAt(i).get('sellerSKU');
						alert(SKU);

						// Now you can cook yours !!
					}
				}
			}
		}
	}
]
Posted in Ext-JS, Tech Note | Tagged , , , | 4 Comments

[Ext-JS] Locking Grid Column

To locking column, we need to implement the LockingColumnModel and LockingGridView


var myGrid = new Ext.grid.GridPanel({
	store : myStore,
	colModel : new Ext.us.grid.LockingColumnModel([ // <- ***
		{header : 'Name', dataIndex: 'name', id : 'nameIdx'},
		{header : 'Age', dataIndex: 'age'},
		{header : 'Address', dataIndex: 'Address'}
	]),
	view : new Ext.ux.grid.LockingGridView(), // <- ***
	title : 'Locking Column',
	width : 200,
	height: 200
});


Posted in Ext-JS, Tech Note | Tagged , , , | 2 Comments

[Ext-JS]How to use Extjs updater

What is the Ext.Updater?

=> Read API :) http://dev.sencha.com/deploy/ext-3.3.1/docs/

It update ajax call automatically by interval time you set.


Posted in Ext-JS, Tech Note | Tagged , | Leave a comment

[Ext-JS] Parallel Layout Form & vertical align (Table layout)


For parallel layout, I choose table layout.


testField =
{
	xtype : 'textfield',
	name : 'field1',
	fieldLabel : 'Field 1 ',
	anchor : '-10',
	emptyText : 'Hello',
	allowBlank : false
};

myForm = {
	xtype : 'form',
	id : 'myForm',
	layout : {
		type : 'table', // <==
		columns : 2
	},
	defaults : {
		padding : 10,
		width : 300,
	},
	border : false,
	url : '',
	labelWidth : 100,
	labelAlign : 'right',
	items : [
		testField,testField,testField
	]
}




Hum.. something wrong.. there are no field label.

To show field label we need to set layout as ‘form’, so we need to add one more items array into the items.


myForm = {
	xtype : 'form',
	id : 'myForm',
	layout : {
		type : 'table',
		columns : 2
	},
	defaults : {
		padding : 10,
		width : 300,
	},
	border : false,
	url : '',
	labelWidth : 100,
	labelAlign : 'right',
	items : [
		{
			layout : 'form',	      //<===
			items : [testField,testField] //<===
		},
		{
			layout : 'form',
			items : [testField]
		}
	]
}






now, it looks parallel layout.

But to better look, we need to set vertical align.



Define style tag on the top of codes.

//css define

and use it in our layout.

myForm = {
	xtype : 'form',
	id : 'myForm',
	layout : {
		type : 'table',
		columns : 2
	},
	defaults : {
		padding : 10,
		width : 300,
		cellCls : 'verticalAlignTop',   // <=====
		border : false,			// <=====
	},
	border : false,
	url : '',
	labelWidth : 100,
	labelAlign : 'right',
	items : [
		{
			layout : 'form',
			items : [testField,testField]
		},
		{
			layout : 'form',
			items : [testField]
		}
	]
}






Now, it looks what I wanted. ^^

Posted in Ext-JS, Tech Note | Tagged , , , , , | 3 Comments

[Ext-JS] Ext substring (substr method)

Ext.util.Format.substr(string,start(int),length(int))

var str = "Hello, World!";
alert(Ext.util.Format.substr(str,0,5));
//output : Hello
Posted in Ext-JS, Tech Note | Tagged , | Leave a comment