* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
/*----------------------------------------------------------*/
var myNode;
var myFNode;
function createTree(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
containerScroll: true,
rootVisible: true,
// checkModel: 'cascade', //瀵規爲鐨勭駭鑱斿閫?br />
// onlyLeafCheckable: false,//瀵規爲鎵鏈夌粨鐐歸兘鍙?br />
// animate: false,
loader: new Tree.TreeLoader({
})
});
var root = new Tree.AsyncTreeNode({
iconCls: 'folder',
text: 'china',
draggable: false,
id : '0'
});
//var orderby =new Ext.tree.TreeSorter(tree,{folderSort:true,dir : "asc",property :"order"});
//new Ext.tree.TreeSorter(tree, {folderSort:false});
tree.setRootNode(root);
// tree.on('click', function(node){node.toggle();});
tree.on('beforeload', function(node) {
tree.loader.dataUrl = 'tree.txt'; //鍚庡彴鑾峰彇鐨勬暟鎹?br />
myNode=node;
myFNode=node.parentNode;
rootNode=root;
});
tree.on('click',
function(node)
{
alert(node.text);
}
);
tree.render();
root.expand();
}
/*----------------------------------------------------------*/
Ext.onReady(function(){
createTree();
});
]]>
/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var store=new Ext.data.JsonStore({
//results 琛ㄧず緇撴灉鏁?br />
//rows 琛ㄧず浠庡悗鍙頒紶榪囨潵鐨凧SON鏁版嵁
data:{ "results": 2, "rows":[
{"id":1, "city": "suzhou", "areacode": "0512", "perincome": "2500" },
{"id":2, "city": "nanjing", "areacode": "025", "perincome": "2200" }]},
//鑷姩鍔犺澆(涓嶈兘鐢╯tore.load())
autoLoad:true,
totalProperty:"results",
root:"rows",
fields:['title', {name:'city',mapping:'city'},
{name:'areacode',type:'int'},
{name:'perincome',mapping:'perincome',type:'int'},
{name:'id',mapping:'id',type:'int'}
]
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'city',header: "city", width: 400, sortable: true, dataIndex: 'city'},
{header: "areacode", width: 200, sortable: true, dataIndex: 'areacode'},
{header: "perincome", width: 200, sortable: true, dataIndex: 'perincome'}
],
stripeRows: true,
autoExpandColumn: 'city',
height:280,
width:600,
title:'Array Grid'
});
grid.on('rowclick', function(grid, rowIndex, e) {
var recordr = store.getAt(rowIndex);
alert('id is ' + recordr.get('id') + ',city name is ' + recordr.get('city'));
// window.open('index.html');//璁劇疆杞悜鍦板潃,鐢ㄤ簬瀵箁ow鐨勬搷浣?涓句釜渚嬪瓙 褰撶劧涔熷彲浠ョ敤location.href絳?br />
});
//鎶婃grid鏀捐繘grid-example閲岄潰
grid.render('grid-example');
});
]]>