[ExtJs] Simple Tree Example (Json as JSP)

=========== test2.html =================
[html]
[head]
[link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"]
[script type="text/javascript" src="../adapter/ext/ext-base.js"][/script]
[script type="text/javascript" src="../ext-all.js"][/script]
[script type="text/javascript" src="reorder2.js"][/script]
[title]Insert title here[/title]
[/head]
[body]
[div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"][/div]
[/body]
[/html]

=============== reorder2.js ====================

Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

var tree = new Tree.TreePanel({
el:'tree-div',
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
// rootVisible: false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'json.jsp'
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
iconCls:'conthruAr',
id:'source'
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
});

================ json.jsp =================
[%@page import="java.util.Enumeration"%]
[%
Enumeration ss = request.getParameterNames();
String value;
while(ss.hasMoreElements()){
String key = (String)ss.nextElement();
value = request.getParameter(key);
System.out.println(key+" : "+value+" ");
}

String getS = request.getParameter("node");

System.out.println("ss : "+getS);
if (getS.equals("source")){
%]
[{"text":"1","id":"1","cls":"folder"},{"text":"4","id":"4","leaf":true,"cls":"file"},{"text":"3","id":"3","cls":"folder"},{"text":"2","id":"2","leaf":true,"cls":"file"}]
[%
} else if(getS.equals("3")) {
%]
[{"text":"7","id":"7","leaf":true,"cls":"file"},{"text":"8","id":"8","cls":"folder"}]
[%} %]

[ExtJs] Ext.grid.GroupingView : groupTextTpl

Get data for GroupingView

grid = new Ext.grid.GridPanel({
id: getGridArea,
ds: createStore,
cm: this.columnModelFile(),
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text}|{[ values.rs[0].data["state"] ]} ({[values.rs.length]} {[values.rs.length > 1 ? "Devices" : "Device"]})'
}),
// viewConfig: {
// forceFit:true
// },
sm: selectionModel,
width: 500,
height: 250,
//title: 'Firmware File List',
collapsible: false,
animCollapse: true,
bbar: pagingTool
});

[ExtJs] Grid Panel - layout:'fit' problem

layout:'fit' is not working collectly in IE 6.

You should put style

please add

.x-grid3-header-offset {width: auto;}

[ExtJs] dynamically Add button PagingToolBar

==== create PagingToolbar ====
var toolBar = new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg: 'total{2} {0} - {1}',
emptyMsg:'no data'
})

======== create Toolbar Button =======
var sbun = new Ext.Toolbar.Button({
pressed: true,
enableToggle: false,
text: 'Create',
id: 'createId',
cls: ''
})


======= create Grid with PagingToolbar =======
var grid = new Ext.grid.GridPanel({
el:'Firmware-grid',
store:store,
cm:cm,
//sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
viewConfig:{
forceFit:true
},
title:' grid title',
width:500,
height:500,
loadMask:true,
frame:false,
bbar:toolBar
});

====== Add Toolbar Button ====
grid.render();
grid.getBottomToolbar().add('-',sbun);

[ExtJs] - Update Panel Data

== updating panel ==
panel1 = new Ext.Panel({
html: 'panel one'
});
panel2 = new Ext.Panel({
html: 'panel two'
});

== default panel ==
fitpanel = new Ext.Panel({
layout:'fit',
region: 'center'
});

=== change option ==
fitpanel.remove(panel1, true);
panel2 = new Ext.Panel({
html: 'panel two'
});
fitpanel.add(panel2);
fitpanel.doLayout();

[ExtJs] - Auto Width in Panel of Grid

" layout:'fit' "



upPanel = new Ext.Panel({
title:'Device List',
region:'center',
collapsible:false,
reload:true,
width:400,
height:200,
minSize: 100,
autoScroll:true,
bodyStyle:'background-color: white',
items: [this.gridEam()],
layout:'fit'
});

[ExtJS] - Icon in the top of Panel

tools: [{id: 'refresh', handler: refreshO, scope: refreshO}]

var refreshO = function() {
do something.
}

[ExtJs] Grid button in PagingToolbar

===== js file =======

bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
iconCls: 'x-btn-text-icon',
//cls: 'x-tbar-loading',
toggleHandler: toggleDetails
},'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
iconCls: 'x-btn-text-icon',
//cls: 'x-tbar-loading',
toggleHandler: toggleDetails
}]
})

=========== css part ==============
.x-tbar-loading{
background-image:url(../../resources/images/default/grid/refresh2.gif)!important;
}
.x-btn-text-icon{
background-image:url(../../resources/images/default/grid/group-by.gif)!important;
}

[ExtJs] Namespace example

=== html file ====
[!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"]
[html lang="en"]
[head]
[meta http-equiv="content-type" content="text/html; charset=iso-8859-1"]
[title]namespace test page[/title]
[!-- Bring in the ExtJs Libraries and CSS --]
[link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /]
[script type="text/javascript" src="../../adapter/ext/ext-base.js"] [/script]
[script type="text/javascript" src="../../ext-all-debug.js"] [/script]
[!-- Place the page specific js here --]
[script type="text/javascript" src="applayout.js"] [/script]
[!-- End page specific js --]

[script type="text/javascript"]
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
[/script]

[/head]
[body]


[/body]
[/html]


===== js file ====
Ext.BLANK_IMAGE_URL='../resources/images/default/s.gif';

Ext.namespace('myNameSpace');

Ext.namespace('myNameSpace2');

myNameSpace.app = function() {
return {
init:function(){
alert('application successfully initialized');
//this.testInit();
var aa = myNameSpace2.app.testIni('test value1');
alert(aa);
this.testInit(aa+" : 2");
},
testInit: function(getValue){
alert(getValue);
}
}
}();


myNameSpace2.app = function(){
return{
testIni:function(getValue) {
var ss = getValue;
return ss;
}
}
}();

[ExtJs] Popup - clean Window object

var button = Ext.get('show-btn');

button.on('click', function(){


var win = new Ext.Window({
title: 'Layout Window',
closable:true,
width:600,
height:350,
//border:false,
plain:true,
buttons: [{
text: 'Save',
handler: function(){
if(nav.getForm().isValid()){
nav.getForm().submit({
url: 'uploadFile.htm',
method:'POST',
waitMsg: 'Uploading your file...',
success: function(nav, o){
popupMsg('Success', 'Processed file "'+o.result.file+'" on the server');
dlgPopup.hide();
},
failure: function() {
popupMsg('Fail', 'Fail to upload file "'+o.result.file+'" on the server');
dlgPopup.hide();
}

});
}
}
},{
text:'Close',
handler:function(){
win.close();
}
}]
});

win.show(this);
});

[ExtJs] TimeField example

var startTimePicker = new Ext.form.TimeField({
triggerClass: 'x-form-time-trigger',
fieldLabel: 'Start time',
name: 'starttime',
editable:false,
value:'',
format:"H:i:s",
value: new Date()
});
var endTimePicker = new Ext.form.TimeField({
triggerClass: 'x-form-time-trigger',
fieldLabel: 'End time',
name: 'endtime',
editable:false,
format:"H:i:s",
value: new Date()
});
startTimePicker.setValue('');
endTimePicker.setValue('');

[ExtJs] - Ajax example

====== with Connection ===========

var conn = new Ext.data.Connection();
conn.request({
url: 'history.jsp',
method: 'POST',
params: {"metaID": metaID, columnName: field},
success: function(responseObject) {
showHistoryDialog(responseObject.responseText);
},
failure: function() {
}
});

====== with getForm().submit===========
nav.getForm().submit({
url: 'am-TaskManagement-Tasks-Value.htm',
params: {command: 'scheudleUpdate'},
method:'POST'
});

[ExtJs] reload store from panel

var store = new Ext.data.Store({
.....
.....
.....

var grid = new Ext.grid.GridPanel({
id:'gridpanel'
ds:store,
.....
.....
.....


Ext.getCmp('gridpanel').getStore().reload();

[ExtJs] Simple Panel example

var buttonHTML = 'put html source here';

var ct = new Ext.Panel({
renderTo:'pagingJson-grid',
frame:true,
title:'Book List',
width:500,
height:400,
layout:'border',
items: [
grid,
{
id: 'detailPanel',
region: 'center',
bodyStyle: {
//background: '#ffffff',
padding: '7px'
},
html: buttonHTML
}
]
})

[ExtJs] get data from grid

=== 1 ===================
grid.getSelectionModel().on('rowselect', function(sm, rowIdx,r){

alert(r.data.my_id+" : "+r.data.organization);
alert(rowIdx);
alert(grid.getSelectionModel().getCount());
alert(grid.getSelectionModel().getSelected().get('my_id'));

//bookTpl.overwrite(detailPanel.body, r.data);
});
=== 2 =================================

var getData = grid.getSelectionModel().getSelected();
alert(getData.get('my_id'));

=== 3: multi selection =================================

var getData = grid.getSelections();
for (var i = 0 ; i < getData.length ;i++) {
alert(getData[i].get('my_id'));
}

[ExtJs] Call object function from the different js file

=========== bb.js Other js file =========
var uploadPopup = function(){

var win,dlgPopup, nav;

return {
init:function(){
alert('start init');
},{
doSomething:function(){
alert('start do somthing');
}

}
}();

======== aa.js : Call this method object from original js file ========
Ext.get('button2').on('click', function(){
uploadPopup.init();
})

[ExtJs] popup - file upload UI

[ExtJs] popup - file upload UI

Tip: "autoHeight: true"

see here

* Ext.FormPanel
* Ext.Window

[ExtJs] - popup example

ExtJs Popup Example (modal popup)

This is using "Ext.Window" and "Ext.FormPanel"

see here

Json : working with JSP , extJs

simple sample with jsp, extjs :
This is paging grid example from extjs for ui

5 files

* PagingBean.java
* CreateJson.java
* twopaging.js
* twoPaging.html
* sendTwoPaging2.jsp

download sample files