Пример совместного создания компонентов DictionaryTree, ParamsBox и FindBox

Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:

1. Добавить ссылки на css-файлы PP.css и PP.Rds.css.

Также нужно добавить ссылки на следующие js-файлы: PP.js, PP.Metabase.js, PP.Rds.js, resources.ru.js.

2. Далее в теге <head> необходимо добавить сценарий, который создаёт дерево элементов справочника НСИ, контейнер параметров и контейнер, предназначенный для поиска элементов справочника. При этом предполагается наличие в репозитории справочника НСИ с ключом 8093:

<script type="text/javascript">
    var dictionaryTree; // Дерево элементов справочника НСИ
    PP.ImagePath = "../../build/img/"; // Зададим путь к папке с изображениями
    PP.ScriptPath = "../../build/"; // Зададим путь к папке со сценариями
    PP.CSSPath = "../../build/"; // Зададим путь к папке со стилями
    var dictionaryKey = 8093; // Ключ справочника
    function Ready() {
        // Укажем путь к корневой папке, содержащей файлы ресурсов
        PP.resourceManager.setRootResourcesFolder("../resources/");
        // Установим языковые настройки для ресурсов
        PP.setCurrentCulture(PP.Cultures.ru);
        var waiter = new PP.Ui.Waiter();
        // Создадим соединение с репозиторием
        var metabase = new PP.Mb.Metabase({
            PPServiceUrl: "PPService.axd?action=proxy",
            Id: "WAREHOUSE",
            UserCreds: {
                UserName: "user",
                Password: "password"
            },
            StartRequest: function () {
                // При запросе метаданных отобразим компонент типа PP.Ui.Waiter
                waiter.show();
            },
            EndRequest: function (sender, args) {
                // Скроем компонент типа PP.Ui.Waiter
                waiter.hide();
            },
            Error: function (sender, args) {
                // Выведем описание ошибки
                console.log(args.ResponseText);
            }
        });
        // Откроем соединение с репозиторием
        metabase.open();
        var rdsService = new PP.Rds.RdsService({
            Metabase: metabase
        });
        // Откроем справочник НСИ с заданным ключом
        var dictionary = rdsService.openRds(dictionaryKey, null);
        // Создадим дерево элементов справочника НСИ
        dictionaryTree = new PP.Rds.Ui.DictionaryTree({
            ParentNode: "dictionaryTree",
            Source: dictionary, // Источник данных
            ImagePath: PP.ImagePath, // Путь к папке с изображениями
            Width: 600, // Ширина дерева
            Height: 120 // Высота
        });
        // Создадим контейнер, предназначенный для поиска элементов справочника
        findBox = new PP.Rds.Ui.FindBox({
            Source: dictionary, // Источник данных
            ImagePath: PP.ImagePath, // Путь к папке с изображениями
            Width: 200,
            Height: 70,
            FindChanged: function (sender, args) {
                // Выполним поиск
                dictionaryTree.setFilter(args.Filter);
            }
        });
        // Создадим контейнер параметров справочника
        paramsBox = new PP.Rds.Ui.ParamsBox({
            Source: dictionary, // Источник данных
            ImagePath: PP.ImagePath, // Путь к папке с изображениями
            Width: 200,
            Height: 50,
        });
        // Создадим таблицу для размещения компонентов
        layoutGrid = new PP.Ui.GridPanel({
            Class: "PPRdsDataAreaGrid",
            ParentNode: "layoutGrid"
        });
        // Добавим в таблицу 
        layoutGrid.add(paramsBox, 0, 0);
        layoutGrid.add(findBox, 0, 1);
        layoutGrid.add(dictionaryTree, 0, 1);
    }
</script>

3. В теге <body> требуется добавить блок с идентификатором «layoutGrid» для хранения таблицы, в которой будут размещены дерево элементов справочника НСИ, контейнер параметров и контейнер, предназначенный для поиска элементов справочника:

<body onload="Ready()">
    <div id="dictionaryTree" style="border: 1px #C3C3C3 solid; width: 600px"></div>
</body>

После выполнения примера на html-странице будут размещены компоненты DictionaryTree, ParamsBox и FindBox:

См. также:

DictionaryTree | FindBox | ParamsBox