Extjs4 Treegridの利用体験共有（体験）_extjs

最近、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
}]
});