史上最強の学習ノートExt 1週目---GridPanel (Basics)_YUI.Ext関連

特殊効果を実現したい場合は、この記事は適していませんが、拡張記事が必要な場合は、私の記事が非常に適していると思います。
もう 1 つ: このチュートリアルは Ext2.2 に基づいています。多くのチュートリアルではこれについて説明していません。非常に混乱します。ここで特別に注意しておきたいことがあります。
インターネット上には多くのチュートリアルがありますが、実際に使用されるものはあまり多くありません。インターネット上の友人全員を助けるために、それらを毎週まとめたいと思います。お役に立てば幸いです。初心者が知っておくべき基本を見逃さないように、すべての詳細を説明します。チュートリアルを書くのは初めてなのでとても面白いです。
これを学ぶためのプロセスは、1 つのコントロールを通じて他のコントロールを理解することであり、残りは API のプロパティを確認することです。私は API の CHM バージョンを自分で翻訳しています。それは個人的な操作だからです。したがって、時間は限られています。 。私を許してください。
内線の下。最初に触れるのは Grid です。私もです。 GridのおかげでExtに接続できました。
まず、Ext クラスの宣言フォームについて説明します。
Grid を例にします
Js コード

コードをコピーします コードは次のとおりです:

var Grid=new Ext.form.GridPanel({
ここにプロパティがあります。
});
var Grid=new Ext.form.GridPanel({
ここにプロパティがあります) .
}) ;

この宣言は Java のオブジェクト指向の宣言に非常に似ています。 new キーワードを GridPanel クラスのインスタンスとして使用するため、オブジェクト指向に関する基本的な知識はここでは拡張されません。ただ、このまとめを書くときにオブジェクト指向の概念がよく使われます。個人的には、プログラミングを学ぶのにJavaを学ぶかどうかは関係ないと感じています。しっかりと学びたい場合は、英語版を読むのが最善です。なぜなら、文章を何度も熟考できるからです。印象を深めます。まだ半分しか見ていませんが、人間の手続き的思考において大きな役割を果たしていると感じています。さて、話が逸れないようにしましょう。
OOP を知っている人なら誰でも、クラスのインスタンスを実装するときに、このコンストラクター内の属性値が初期化されるか、メソッドが呼び出されることを知っています。
ただし、Ext での属性の割り当ては「=」ではなく「:」です。
上で述べたことは理論上の話ですが、これが実際のプロセスです。
var Grid = new Ext.form.GridPanel(); クラスのオブジェクトをインスタンス化します。
{} には、このクラスに渡される初期化属性値が含まれます。私はまだコアコードを勉強しておらず、そのレベルに達していないため、具体的にどのように提供して実装するかについては説明しません。今後の Ext 学習体験で説明します。
上記の例を拡張します。
Java コード

コードをコピー コードは次のとおりです:

var Grid=new Ext.form .GridPanel({
id: 'list-account-panel',
ds: dataStore,
cm: userCM,
sm: selectBoxModel,
tbar: menubar,
bbar: ページングバー、
loadMask: {msg: データの読み込み中...'}、
レイアウト: 'fit'、
autoScroll:true
}); .form .GridPanel({
id: 'list-account-panel',
ds: dataStore,
cm: userCM,
sm: selectBoxModel,
tbar: メニューバー,
bbar: ページングバー、
loadMask: {msg: データの読み込み中...'}、
レイアウト: 'fit'、
autoScroll:true
});

これらは一般的に使用される属性であり、ここから他の部分に拡張されます。
これは、Strength オブジェクトを宣言し、初期化します。
このプロセスを本当に理解していれば、API に精通していて、コンポーネントのプロパティとその定義されたメソッドを理解していれば、任意のコンポーネントを作成できます。 GridPanel.Panel,Tree など、実際には路地が原則です。さて、この重要な基本部分を終了しましょう。次に属性について説明します。興味がある場合は、読み続けてください。
一部のチュートリアルでは、Ext2.2 の属性 el を使用して、コントロールを指定されたページ要素にバインドします。ただし、この el のせいで、誰もがページ内のバインドのみに固定されています。要素。実際、グリッドを tabPanel に追加する必要がある場合があります。現時点ではエルは必要ありません。場合によっては、独自の新しい GridPanel クラスを作成し、GridPanel クラスを継承します。作成プロセス中に ext.applyif メソッドを使用して、新しいクラスにはなく元のクラスにある属性をコピーします。このようにして、新しいクラスを呼び出すときに、新しいクラスは el などの別の属性値を渡すことができます。クラスパッケージを作成しました。次に、先ほど述べた拡張クラスのカプセル化について説明します。まずはグリッドの基礎知識を終えておきましょう。
上記の例を見てください。ID は、この Ext コンポーネントの唯一の ID 番号である必要があります。これにより、他の問題の特定と防止が容易になります。たとえば、ID の問題は、tabPanel コンポーネントの html が呼び出されるときに発生します。
ds、これは設定データソースです。
例の具体的なコードは次のとおりです。
Java コード

コードをコピー コードは次のとおりです。

dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{名前: 'id'}、
{名前: '名前'}、
{名前: 'タイプ名'}、
{名前: '時間'}、
])
});
this.dataStore.load({params:{start:0, limit:this.myPageSize}});
dataStore = new Ext.data.Store({
proxy: new Ext) .data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: ' results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{名前: 'タイプ名'},
{名前: '時間'},
])
});
this.dataStore.load({params:{start:0, limit: this.myPageSize}}); ここでは説明すべきことがたくさんあります。 。
Ext は Web サイトで使用されるため、XML ファイルを直接読み取るのではなく、主にサーバーと対話するため、静的ではありません。そこで、ここではサーバーからデータを読み取る例を使用しました。
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}); これは非常に便利です単純です はい。一目で理解できます。 HttpProxy はデータ要求をローカル ファイルに送信します。簡単に理解するとこんな感じです。コアコードは研究されておらず、具体的な動作プロセスは不明です。でもクラスとしては。ただ使い方を知ってください。
しかし、ここには匿名関数を使用するという概念があります。匿名関数とは言えません。 。 。なんと言うか。 。 。

プロキシ属性は、ファイルにリクエストを送信する形式です。 。属性の割り当てには、すでに作成されたインスタンスの名前を指定することも、new キーワードを使用して作成した匿名インスタンスを指定することもできます。これを理解できるかどうかわかりません。
次の属性リーダーは、このデータ ソースのデータ読み取り方法を設定します。この例では jsonReader を使用しています。ArreyReader も使用できます。これは特定のニーズによって異なります。プロパティ値は、オブジェクトまたは匿名インスタンス オブジェクトにすることができます。という方法もあるようです。試したことはありません、単なるアイデアです。

コードをコピー コードは次のとおりです。new Ext.data.JsonReader({

root : 'results',

totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name '}、
{名前: 'タイプ名'}、
{名前: '時間'}、
])


この部分についてはもう一度話しましょう。これは比較的簡潔で標準的な JsonReader メソッドです。
まず、Json データ形式について説明します。これは非常に重要です。私は、Json データを送信する方法だけは知っていますが、それがどのような形式であるかは知りません。
（{"total":"5","re​​sults":["id":"28","name":"SamPeng","typename":"これはタイプです","time":" 2008.02 .02"]})
これは復帰記録です。複数ある場合。
（{"total":"5","re​​sults":["id":"28","name":"SamPeng","typename":"これはタイプです","time":" 2008.02 .02", {記事 2}, {記事 3}, {記事 4}]})
理解できますか?あはは、理解できない場合は、さらにいくつかの単語を入力します。要約すると。
自分で json 配列を構築し、それを Ext.この形式でなければなりません。
{test:'test'}
中括弧を覚えて展開する必要があります。
前のテストで宣言された name 属性は、データを取得した後に切り捨てる方法を JsonReader に指示するためのマーク シンボルとして使用されます。
私が書いた php は、上の例で使用した json データを返します。
Echo $callback.'({"total":"'.$article_NUM.'","re​​sults":'.json_encode($result_array).'})';
見ましたか?この json 配列の形式を構築する必要があり、マークアップ シンボルは jsonReader のものと同じである必要があります。
つまり、total と results によってインターセプトされた値がこの戻り値に指定されます。フォーマットが異なるとデータを読み込むことができません。
ルート属性を振り返ると、結果タグ シンボルの後ろに json データ形式の値をバインドします。 jsonReader 以降の属性
{name: 'id'}、
{name: 'name'}、
{name: 'typename'}、
{name: 'time'}、
これは、json 配列をインターセプトするために使用されます。
最後にロードします。これは単なる定義とインスタンス化にすぎないからです。それに対して操作は実行されませんでした。
これはわかりやすいですね。衣服を洗って洗濯機に入れても、スイッチを入れたり、電源を接続したりしなければ、衣服はきれいになりません。
この Stroy データ ソースが作成されているので、そのメソッドを呼び出すことができます。 Stroy には、load と呼ばれるメソッドがあります。そのデータをロードします。そこで洗濯が始まりました。あはは~
次に、
cm の上の GridPanel のプロパティに戻ります: userCM
これは、設定されたテーブルの列ヘッダーです。何。あなたは中尉が何であるかを知りません。 。シャワーを浴びて寝ることができます。
Java コード
var cm = new Ext.grid.ColumnModel([
selectBoxModel,
{header:'記事番号',dataIndex:'id', ツールヒント:'記事番号'},
{header:'記事タイトル',dataIndex:'name',tooltip:'記事名'},
{header:'記事タイプ',dataIndex:'typename',tooltip:'記事カテゴリ'},
{header:'変更時刻',dataIndex:'time',tooltip:'変更時刻'}
]);
cm.defaultSortable = false;
var cm = new Ext.grid.ColumnModel ([ SELECTBOXMODEL,
{ヘッダー: '記事シリアル番号', dataindex: 'id', toOOLTIP: '記事番号'},
{ヘッダー: '記事タイトル', DataINDEX: '名前', TOOLTIP : '記事名'},
{header:'記事タイプ',dataIndex:'typename',tooltip: '記事カテゴリ'},
{header:'更新時刻',dataIndex:'time',ツールチップ : '変更時間'}
]);
cm.defaultSortable = false; これ以上は言いません。 。ここで注意すべき唯一のこと: ツールチップはマウスチップをオンにすることです。残りは新しいインスタンスを作成するのと変わりません。 new->クラス名->構築コンストラクター->属性
defaultSortableはソートするかどうかを設定します。 Ext がローカライズされておらず、並べ替えボタンが英語になっているため、false に設定しました。そこで false を設定しました。列ごとに個別に設定することもできます。
tbar: menubar、
bbar: pagingbar、
これら 2 つのプロパティは、ヘッダー ツールバーと下部ツールバーを設定するために使用されます。ツールバーにボタンを配置できます。
ここに下部と上部のツール ボタンがあります。命令はプログラムコードに書かれています。 。私は説明文を書く癖があります。
Java コード
var menubar = [{
text:'追加',
tooltip:'新しい記事を追加',
iconCls:'addItem',//アイコンのプル。英語でも理解できます
handler: function(){//handler 属性の後に、このボタンをクリックした後のイベント処理をバインドするメソッドが続きます 🎜>var createWin = new SamPeng.account.Create();//ファイルをクラス パッケージに入力しました。したがって、ここでインスタンスを直接作成します。
createWin.show();// このメソッドは el バインディングの問題を省略します。
}
},'-',{
id: 'grid-edit-button',
text:'編集',
tooltip:'この記事を編集',
iconCls:'editItem',
disabled:true,
handler: function(){
var Record = Ext.getCmp('list-account-panel').getSelectionModel() 。 getSelected();
var editWin = new SamPeng.Grid.Edit({id: Record.id});
editWin.show();//インターフェースの表示を変更します
}
} '-',{
id: 'grid-delete-button',
text:'delete',
tooltip:'選択した記事を削除',
iconCls:'remove',
無効: true,
ハンドラー: function(){
new SamPeng.Grid.DeleteItem({panel: 'list-account-panel'})
}
}]; pagingbar = new Ext.PagingToolbar({
pageSize: this.myPageSize,
store: this.dataStore,
displayInfo: true,
displayMsg: '項目 {0} ～ {1 } レコードを表示します,合計 {2}',
emptyMsg: "データなし"
}); //これはページングの一番下のボタンです。良い。 。どう説明したらいいのかわかりませんが、私はこれを他の人のものから直接コピーして書きました。ここを変える必要はないと思います。 addItem',//アイコンのプル。英語で読んでも理解できます
; //ファイルをクラスパッケージに入力しました。したがって、ここでインスタンスを直接作成します。
作成Win.show();//このメソッドは el バインディングの問題を省略します。
       }
        },'-',{
                                                                                                                                              🎜 > iconCls:'editItem',
disabled: true,
handler: function(){
var record = Ext.getCmp('list-account-panel').getSelectionModel( ).getSelected();
         var editWin = new SamPeng.Grid.Edit({id: record.id});
id: 'grid-delete-button',
text:'delete',
tooltip:'delete selected article',
iconCls:'remove',
                            disabled: true . var pagingbar = new Ext.PagingToolbar({
pageSize: this.myPageSize,
store: this.dataStore,
displayInfo: true,
displayMsg: 'Display item {0} {1} records in total {2} items',
          emptyMsg: "No data"                                                                                                                                                                                                   emptyMsg: "No data" Well. . I don’t know how to explain it. I wrote this and copied it directly from someone else’s. I don't think there is any need to change here. OK. The basic part is finished. . . In the next article, I will explain how to encapsulate it in a class and use it as a new class that inherits the GridPanel class.
Repeat the statement again. You can't get a complete example from me, not that I don't have one, but I think that would be a disservice to you. What you need more is to check the API. To know the method format, check the API. What's left is to complete your program idea. Thank you all for watching my tutorial. Thanks.
I hate quick tutorials, but I don’t know if they are cliche or not. hehe. Hope it helps everyone.
Reposter. . . I know there are such reposters. I transferred it without even looking at the practicality of the content.
Reprinted by the famous author: SamPeng. Thanks.
I don’t want to teach you novices any advanced techniques, because I am also doing research. I just want to teach you a direction of thinking, the ability to draw inferences from one example, and the ability to truly learn Ext and start to understand it in depth. If you want to achieve special effects, this article is not suitable for you, but if you want to learn Ext with me, I think my article is very suitable for you.