2017-02-15 4 views
3

私はExt Js 4.2を使って基本グリッドを開発しました。ここでは、出力が...Ext Js 4.2を使用して基本グリッドにローカルフィルタリングオプションを追加する方法は?

enter image description here

だ今、私はこのグリッドの列にフィルタオプションを追加したいです。たとえば(=、>、<)のフィルタリングが必要です。

私はいくつかのソースコードがうまくいくかもしれませんが、それらのjavascriptファイルをどこに追加するのが苦労しているか分かりました。ここに私のコードは次のとおりです。

Ext.define("UserListDemo.view.user.UserGrid", { 
 
    extend: "Ext.grid.Panel", 
 
    alias: "widget.userGrid", 
 
    autoHeight:true, 
 
    style: 'margin-top: 10px;margin-left: 15px;margin-right: 20px;', 
 
    title: '<span style="color: #525252;">User List</span>', 
 
    store: 'UserStore', 
 
    name: 'userGrid', 
 
    id: 'userGrid', 
 
    loadMask: true, 
 
    syncRowHeight: true, 
 
    columns:[ 
 
    { 
 
     text: 'ID', 
 
     sortable: true, 
 
     dataIndex: 'id', 
 
     locked: true, 
 
     width: 120 
 
    }, 
 
    { 
 
     text: 'Name', 
 
     dataIndex: 'name', 
 
     locked: true, 
 
     width: 350 
 
    }, 
 
    { 
 
     text: 'Address', 
 
     dataIndex: 'address', 
 
     width: 450 
 
    }, 
 
    { 
 
     text: 'Contact', 
 
     dataIndex: 'contact', 
 
     width: 250 
 
    }, 
 
    { 
 
     text: 'Telephone', 
 
     dataIndex: 'telephone', 
 
     width: 200 
 
    } 
 
    
 
] 
 
});
<html> 
 
    <head> 
 
     <title>User List</title> 
 
     <link href="http://10.11.201.93:81/grid/ext-4.2.1/ext-4.2.1.883/resources/css/ext-all.css" 
 
     rel="stylesheet" type="text/css" /> 
 
     <script src="http://10.11.201.93:81/grid/ext-4.2.1/ext-4.2.1.883/ext-all-debug.js"></script> 
 
     <script src="EXTJS_Files/ListApp.js"></script> 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
    <body> 
 
    </body> 
 
</html>

誰かがフィルタリングのソースコードで私を助けてもらえますし、同様に私の基本的なグリッドとそれを統合する方法?

+0

ここにソースコードhttp://docs.sencha.com/extjs/4.2.0/extjs-build/examples/grid-filtering/grid-filter-local.html – pagep

+0

はいの例もあります。私も気付きました...しかし、grid-filter-local.jsファイルを既存のグリッドにどのように統合できますか?たとえば、ソースコードの2行目 - 'Ext.Loader.setPath(' Ext.ux '、' ../ux ');'しかし私のプロジェクトにExt.uxディレクトリはありませんか? –

+0

ここに、ux名前空間をハンドリングする方法に関する質問があります。http://stackoverflow.com/q/10308018/1732133 –

答えて

1

最後に、フィルタリングオプションを基本グリッドに追加することができました。私はプロセス全体を簡単に共有しています。

まず、ExtJsはMVC(より正確にはMVCS)フレームワークであることに注意してください。したがって、私たちが追加しなければならないフィーチャ(グリッドフィルタリング、チャートなど)は、まずMVCアーキテクチャに従ってください。だから、local-filter.jsファイルを前のUserModelに置き換える必要があります。

ここに、ExtJのモデルビューコントローラ(およびストア)アーキテクチャがあります。私はプロジェクト全体のディレクトリを共有しています。

enter image description here

だから、罰金では、私が以前のソースコードを交換ローカル-filter.jsでUserModel.jsのソースコードを配置します。

第2に、ListApp.jsをindex.phpに含めるだけです。次に、暗黙のうちに必要なすべてのMVC javascriptファイルを呼び出します。ちょうどそのよう: -

<script src="EXTJS_Files/ListApp.js"></script> 

最後に、データフォルダ内の任意のJSONファイルは、日付をフィルタリングする方法として表示されますグリッド内のデータが表示されます。この場合、grid-filter.jsonが使用されています。そして、そのようなUserMdel.jsにデータのディレクトリを設定する必要があります。

enter image description here

ので、これらのステップとフィルタリングとグリッドの種類以下、チャートはExtJSにを使用して開発することができます。

関連する問題