1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | var TreeTest = function(){ // shorthand var Tree = Ext.tree; return { init : function(){ // yui-ext tree var tree = new Tree.TreePanel({ el:'tree', animate:true, autoScroll:true, loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}), enableDD:true, containerScroll: true, dropConfig: {appendOnly:true} }); // add a tree sorter in folder mode new Tree.TreeSorter(tree, {folderSort:true}); // set the root node var root = new Tree.AsyncTreeNode({ text: 'Ext JS', draggable:false, // disable root node dragging id:'source' }); tree.setRootNode(root); // render the tree tree.render(); root.expand(false, /*no anim*/ false); //------------------------------------------------------------- // YUI tree var tree2 = new Tree.TreePanel({ el:'tree2', animate:true, autoScroll:true, loader: new Ext.tree.TreeLoader({ dataUrl:'get-nodes.php', baseParams: {lib:'yui'} // custom http params }), containerScroll: true, enableDD:true, dropConfig: {appendOnly:true} }); // add a tree sorter in folder mode new Tree.TreeSorter(tree2, {folderSort:true}); // add the root node var root2 = new Tree.AsyncTreeNode({ text: 'My Files', draggable:false, id:'yui' }); tree2.setRootNode(root2); tree2.render(); root2.expand(false, /*no anim*/ false); } }; }(); Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | Ext.onReady(function(){ // create the Data Store var store = new Ext.data.Store({ // load using script tags for cross domain, if the data in on the same domain as // this page, an HttpProxy would be better proxy: new Ext.data.ScriptTagProxy({ url: 'http://extjs.com/forum/topics-browse-remote.php' }), // create reader that reads the Topic records reader: new Ext.data.JsonReader({ root: 'topics', totalProperty: 'totalCount', id: 'threadid', fields: [ 'title', 'forumtitle', 'forumid', 'author', {name: 'replycount', type: 'int'}, {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 'lastposter', 'excerpt' ] }), // turn on remote sorting remoteSort: true }); store.setDefaultSort('lastpost', 'desc'); // pluggable renders function renderTopic(value, p, record){ return String.format( '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b> <a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid); } function renderLast(value, p, r){ return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); } // the column model has information about grid columns // dataIndex maps the column to the specific data field in // the data store var cm = new Ext.grid.ColumnModel([{ id: 'topic', header: "Topic", dataIndex: 'title', width: 420, renderer: renderTopic },{ header: "Author", dataIndex: 'author', width: 100, hidden: true },{ header: "Replies", dataIndex: 'replycount', width: 70, align: 'right' },{ id: 'last', header: "Last Post", dataIndex: 'lastpost', width: 150, renderer: renderLast }]); // by default columns are sortable cm.defaultSortable = true; var grid = new Ext.grid.GridPanel({ el:'topic-grid', width:700, height:500, title:'ExtJS.com - Browse Forums', store: store, cm: cm, trackMouseOver:false, sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}), loadMask: true, viewConfig: { forceFit:true, enableRowBody:true, showPreview:true, getRowClass : function(record, rowIndex, p, store){ if(this.showPreview){ p.body = '<p>'+record.data.excerpt+'</p>'; return 'x-grid3-row-expanded'; } return 'x-grid3-row-collapsed'; } }, 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', cls: 'x-btn-text-icon details', toggleHandler: toggleDetails }] }) }); // render it grid.render(); // trigger the data store load store.load({params:{start:0, limit:25}}); function toggleDetails(btn, pressed) { var view = grid.getView(); view.showPreview = pressed; view.refresh(); } }); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |