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

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 はデータ要求をローカル ファイルに送信します。簡単に理解するとこんな感じです。コアコードは研究されておらず、具体的な動作プロセスは不明です。でもクラスとしては。ただ使い方を知ってください。
しかし、ここには匿名関数を使用するという概念があります。匿名関数とは言えません。 。 。なんと言うか。 。 。

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.