Как добавить локальную фильтрацию в базовую сетку с помощью Ext Js 4.2?

Я разработал базовую сетку, используя Ext Js 4.2. Вот выход ..Как добавить локальную фильтрацию в базовую сетку с помощью Ext Js 4.2?

Теперь я хочу добавить опцию фильтрации для столбцов в этой сетке. Например, необходимо выполнить фильтрацию (=,>, <).

Я нашел некоторый исходный код, который мог бы работать, но я боюсь, где добавить эти файлы 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>

Может кто-нибудь помочь мне с исходным кодом фильтрации и как интегрировать его с моей основной сетке, а?

источник

2017-02-15 W.Jack

Вот пример с исходным кодом http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/grid-filtering/grid-filter-local.html – pagep

да. Я также заметил, что ... но как я могу интегрировать файл grid-filter-local.js с моей существующей сеткой? Например, вторая строка в исходном коде - «Ext.Loader.setPath (« Ext.ux »,« ../ux »); Но у меня нет каталога Ext.ux в моем проекте? –

Вот вопрос о том, как передать пространство имен ux http://stackoverflow.com/q/10308018/1732133 –

Наконец-то я смог добавить опцию фильтрации в свою основную сетку. Я кратко рассказываю весь процесс.

Во-первых, мы должны помнить, что ExtJs - это MVC (более точно) вид рамы. Итак, любая функция (фильтрация сетки, диаграмма и т. Д.), Которую мы должны добавить, мы должны сначала следовать архитектуре MVC. SO, я должен заменить файл local-filter.js на предыдущий UserModel.

Вот модель архитектуры контроллера модели (и магазина) для ExtJs. Я делюсь каталогом всего моего проекта.

Так, в порядке, я помещаю исходный код местных-filter.js в UserModel.js заменяющего предыдущий исходный код.

Во-вторых, вы должны указать только ListApp.js в index.php. Затем он будет неявно вызывать все файлы javascript MVC, в которых он нуждается. Так же, как и что: -

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

Наконец, любой JSON-файл в папке данных будут отображены данные в сетке, которые будут показаны в качестве способа вы отфильтровывать дату. В этом случае использовался grid-filter.json. И вам нужно установить каталог данных в UserMdel.js, как это.

Итак, после этих шагов и вида сетки с фильтрацией, графики могут быть разработаны с использованием ExtJS.

источник

2017-02-19 05:41:05

Как добавить локальную фильтрацию в базовую сетку с помощью Ext Js 4.2?

ответ

Смежные вопросы