[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('');

[JSTL] - if / else if (when)

[c:choose]
[c:when test="${commnad == 'scheudleList'}"]
[json:object]
[json:property name="total" value="${totalCount}"/]
[json:array name="data" var="task" items="${utilSchdule}"]
[json:object]
[json:property name="id" value="${task.id}"/]
[json:property name="taskName" value="${task.taskName}"/]
[json:property name="applicationSymbolicName" value="${task.applicationSymbolicName}"/]
[json:property name="endTime"]
[fmt:formatDate value="${task.endTime}" pattern="dd.MM.yyyy HH:mm"/]
[/json:property]
[json:property name="nextTime"]
[fmt:formatDate value="${task.nextTime}" pattern="dd.MM.yyyy HH:mm"/]
[/json:property]
[json:property name="userId" value="${task.userId}"/]
[json:array name="selectedIds" var="selectedId" items="${selectedIds}"]
[c:out value="${selectedId}"/]
[/json:array]
[/json:object]
[/json:array]
[/json:object]
[/c:when]
[/c:choose]

[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'
});

simple File upload

========= HTML =============
[html]
[head]
[meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"]
[title]1[/title]
[body]
[form method="post" action="upload1.jsp" enctype="multipart/form-data"]
Name : [input type="text" name="userName" value="myname"][br]
file : [input type="file" name="upfile"][br]
[input type="submit" value="submit"]
[/form]
[/body]
[/html]

====================

[head]
[meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"]
[title] 1[/title]
[/head]
[body]
[%
String path = "C:/test111/";
DiskFileUpload upload = new DiskFileUpload();
upload.setSizeMax(1024 * 1024);
upload.setSizeThreshold(4096);
upload.setRepositoryPath(path + "temp");
List items = upload.parseRequest(request);


FileItem item1 = (FileItem) items.get(0);
String name = item1.getString("euc-kr");
out.println("Name : "+name + "[br]");


FileItem item2 = (FileItem) items.get(1);
String fileName = item2.getName();
fileName = fileName.substring(fileName.lastIndexOf("\\") + 1);
long fileSize = item2.getSize();
File file = new File(path + "/" + fileName);
item2.write(file);
out.println(fileName + " !!!");
%]
[/body]
[/html]

[Spring] file upload example

you need two jar file library.

- commons-io-1.4.jar
- commons-fileupload-1.2.jar

=== HTML ====
[form method="post" action="uploadFile.htm" enctype="multipart/form-data"]
[input type="file" name="file1"/]
[input type="submit"/]
[/form]

============ dispatcher-servlet.xml ====================

[bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver"]
[property name="maxUploadSize" value="100000"/]
[property name="uploadTempDir" ref="uploadDirResource"/]
[/bean]

[bean id="uploadDirResource"
class="org.springframework.core.io.FileSystemResource"]
[constructor-arg]
[value]C:/test111[/value]
[/constructor-arg]
[/bean]


==================== Controller =====
@Override
protected ModelAndView onSubmit(HttpServletRequest request,
HttpServletResponse response, Object command, BindException errors)throws ServletException, IOException {


MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;

MultipartFile filea = multipartRequest.getFile("file1");


InputStream inputStream = null;
OutputStream outputStream = null;
if (filea.getSize() > 0) {


inputStream = filea.getInputStream();
File realUpload = new File("C:/");
outputStream = new FileOutputStream("C:/test111/"+filea.getOriginalFilename());
System.out.println("====22=========");
System.out.println(filea.getOriginalFilename());
System.out.println("=============");
int readBytes = 0;
byte[] buffer = new byte[8192];
while ((readBytes = inputStream.read(buffer, 0 , 8192))!=-1){
System.out.println("===ddd=======");
outputStream.write(buffer, 0, readBytes);
}
outputStream.close();
inputStream.close();
}

return new ModelAndView("fileupload");
}

Get All parameter (key and value)

Enumeration ss = request.getParameterNames();

while(ss.hasMoreElements()) {

String key = (String)ss.nextElement();
String value = request.getParameter(key);
System.out.println(key + " : " + value+"
");
}

// if value is array type such as check box
/*
String test[] = request.getParameterValues("test");

if(test != null) {
for(int i=0; i < test.length; i++) {
System.out.println("test[" + i + "] : " + test[i] );
}
}
*/

[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

Create OSGI bundle from library jar file

* Create OSGI bundle from library jar file
http://blog.springsource.com/2008/02/18/creating-osgi-bundles/

you need bnd.jar file

this is working with command line

- java -jar bnd.jar wrapprint "library name(such as json-lib-2.2.2-jdk1.5.jar)"

ex) java -jar bnd.jar print json-lib-2.2.2-jdk1.5.jar

ex) java -jar bnd.jar wrap json-lib-2.2.2-jdk1.5.jar

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

Simple List to Json example

Download 6 package jar files

commons-lang 2.3
commons-beanutils 1.7.0
commons-collections 3.2
commons-logging 1.1
ezmorph 1.0.4.jar
json-lib-2.2.2-jdk15.jar

Download all

=== Test source from List to Json ====
============== JsonTest =======================
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;


public class JsonTest {

public void Bean2Json(){
MyBean myBean1 = new MyBean();
myBean1.setId(1);
myBean1.setName("a");

MyBean myBean2 = new MyBean();
myBean2.setId(2);
myBean2.setName("b");

List mybeanList = new ArrayList();
mybeanList.add(myBean1);
mybeanList.add(myBean2);

JSONArray jsonArray = JSONArray.fromObject(mybeanList);
System.out.println("==== : "+jsonArray);

Map map = new HashMap();
map.put("beanlist", jsonArray);

JSONObject jsonObject = JSONObject.fromObject(map);
System.out.println("==== json :"+jsonObject);
}
}

======= MyBean.java =======

public class MyBean {

private int Id;
private String Name;

public int getId() {
return Id;
}
public void setId(int id) {
Id = id;
}
public String getName() {
return Name;
}
public void setName(String name) {
Name = name;
}


}


===== runtTest.java =========


public class runTest {

/**
* @param args
*/
public static void main(String[] args) {
JsonTest jsonTest = new JsonTest();
jsonTest.Bean2Json();

}

}