最近、EXTJS 4 のツリーグリッド インスタンスをデバッグし、多くの記事や公式デモを読みましたが、どれも信頼できるものではなく、表示できませんでした。 C の使用に慣れている私たちのようなプログラマにとって、EXTJS は単に無政府的な盗賊のグループによって維持されており、公式 Web サイトには検索ボックスさえなく、基本的にはトラバースに頼っています。 treegrid を使用するには、呼び出しページの先頭に次のファイルをロードする必要があります:
スクリプト タイプ="text/javascript " src="ext-all.js"> ;
次に、ページの本文に div を記述します
これが上記の役人が言ったことですが、問題は次のとおりです。 、JSには変更はありません、変更しないと消えてしまいます メソッドは正常に実行されます。 Treegrid.js の renderto を div の ID に変更するだけです。
json データ ファイルと css ファイルを呼び出し元ディレクトリに忘れずにコピーしてください。
完成したtreegrid.jsコードは次のとおりです:
/ * このファイルは Ext JS 4 の一部です Copyright (c) 2011 Sencha Inc 連絡先: http://www.sencha.com/contact GNU General Public License の使用法 このファイルは、Free Software Foundation によって発行され、このファイルのパッケージに含まれるファイル LICENSE に記載されている GNU General Public License バージョン 3.0 の条件に基づいて使用できます。GNU General Public License を確実に使用するために、次の情報を確認してください。 Public License バージョン 3.0 の要件は満たされます: http://www.gnu.org/copyleft/gpl.html どのライセンスが使用に適しているかわからない場合は、http:// の営業部門にお問い合わせください。 www.sencha.com/contact. */ Ext.require([ 'Ext.data.*', 'Ext.grid.*', 'Ext.tree .*' ]); Ext.onReady(function() { //dataUrl を使用する代わりにモデルを設定して保存したい Ext.define('Task', { 拡張: 'Ext.data.Model'、 フィールド: [ {名前: 'タスク'、タイプ: '文字列'}、 {名前: 'ユーザー'、タイプ: '文字列' }, {名前: '期間'、タイプ: '文字列'} ] }); var store = Ext.create('Ext.data.TreeStore', { model: 'Task ', proxy: { type: 'ajax', //ストアは .json ファイルからコンテンツを取得します url: 'treegrid.json' }, folderSort: true }); //Ext.ux.tree.TreeGrid は Ux ではなくなりました。単純に、tree.TreePanel vartree = Ext.create( 'Ext.tree .Panel', { title: 'Core Team Projects', width: 500, height: 300, renderTo: 'tree-example', //2B の公式およびSV パーティー、これは実際には getbody、あなたの妹です。 collapsible: true, useArrows: true, rootVisible: false, store: store, multiSelect: true, singleExpand: true, // '列' プロパティは 'headers' になりました columns: [{ xtype: 'treecolumn', //これにより、どの列にツリーが表示されるかがわかります text: 'Task', flex: 2, sortable: true, dataIndex: 'task' },{ // カスタム tpl を使用できるように、templateheader コンポーネントを使用する必要があります xtype: 'templatecolumn', text: 'Duration', flex: 1, sortable: true, dataIndex: 'duration', align: 'center', //カスタムに追加行の tpl tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', { formatHours: function(v) { if (v < 1) { return Math.round(v * 60) ' mins'; } else if (Math.floor(v) !== v) { var min = v - Math.floor(v) ; return Math.floor(v) 'h ' Math.round(min * 60) 'm'; } else { return v 'hour' (v === 1 ? '' : 's'); } } }) },{ text: '割り当て先', flex: 1, dataIndex: 'user', 並べ替え可能: true }] });