使用保存的值设置dijit FilteringSelect的值

时间:2013-10-04 17:19:07

标签: dojo episerver-7

我为EPiServer开发了一个dijit小部件。在小部件中有一个FilteringSElect,它从REST存储中获取数据。填充FilteringSelect的值是数字Id和文本值。

当EPiServer保存该值时,它是保存的数值(Id)。

我的整个小部件看起来像这样:

{

return declare("communityuser.editors.CommunityUserSelector", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {

    templateString: "<div class=\"dijitInline\">\
                        <div data-dojo-attach-point=\"stateNode, tooltipNode\">\
                            <div data-dojo-attach-point=\"inputWidget\" data-dojo-type=\"dijit.form.FilteringSelect\" style=\"width: 300px\"></div><span style=\"padding-left:10px;\"><a href=\"#\" data-dojo-attach-point=\"resetLink\">Reset</a></span>\
                        </div>\
                    </div>",

    intermediateChanges: false,

    value: null,

    store: null,

    onChange: function (value) {
        // Event
    },

    postCreate: function () {
        // call base implementation
        this.inherited(arguments);

        // Init textarea and bind event
        this.inputWidget.set("intermediateChanges", this.intermediateChanges);

        //set whether the internal required property is true
        this.inputWidget.set('required', false);

        //get a reference to the CommunityUserStore
        var registry = dependency.resolve("epi.storeregistry");
        this.store = this.store || registry.get("customquery");

        //set the store for the FilteringSelect
        this.inputWidget.set("store", this.store);

        //connect the onChange event for the FilteringSelect
        this.connect(this.inputWidget, "onChange", this._onInputWidgetChanged);

        //connect the onclick event for the Reset Link
        this.connect(this.resetLink, "onclick", this._onResetClicked);
    },

    isValid: function () {
        // summary:
        //    Check if widget's value is valid.
        // tags:
        //    protected, override

        return true;
    },

    // Setter for value property
    _setValueAttr: function (value) {

        if (!value) {
            return;
        }

        //set the value of the FilteringSelect and the value of the parent control
        this.inputWidget.set("value", value.userId);
        this._set("value", this._serializeUser(value));
    },

    // Event handler for the changed event of the input widget
    _onInputWidgetChanged: function (value) {

        this._updateValue(value);
    },

    //Event handler when the Selection in the FilteringSelect is changed
    _updateValue: function (value) {

        //check whether the initial value matches the new value i.e. the value after the selection has changed
        if (this._started && epi.areEqual(this.value, this._serializeUser(value))) {
            return;
        }

        //create an object representation of the value
        var formattedValue = (!value) ? {} : this._serializeUser(value);

        this._set("value", formattedValue);
        this.onChange(formattedValue);
    },

    _onResetClicked: function (event) {

        event.preventDefault();
        this.inputWidget.reset();

    },

    _serializeUser: function(userId) {

        return ({userId: userId });

    },

});

这可能不是编写dojo / dijit小部件的正确方法 - 这是我的第一个。

在我的Rest商店中,我有两个方法,Get(字符串名称)和GetUserById(int userId)。

返回Get方法的值,我猜是因为Get是dojo正在寻找的默认方法。因此,在加载后,当用户在FilteringSelect中键入值或从FilteringSelect中选择下拉时,将使用Get方法返回的所有值进行填充。

但是,如果小部件加载它已经有一个值(因为它保存在EPiServer中)我想从我的商店调用一个不同的方法并返回1条记录 - 在这种情况下,要返回的记录将是具有相同ID的用户帐户。

Id |值 1 | “用户1” 2 | “用户2” 3 | “用户3”

我正在努力的是如何从商店调用该方法,然后显示FilteringSelect中返回的值。

这是我第一次使用dojo或dijit,所以我可能会做出根本错误的事情。

有人可以给我一个指针吗?

非常感谢 人

1 个答案:

答案 0 :(得分:3)

对于FilteringSelect,您可以设置三个属性:“searchAttr”,“labelAttr”和“value”。您可以将“searchAttr”设置为数据中可以进行过滤搜索的属性名称,将“labelAttr”设置为将在UI中显示的数据的属性名称,并将“value”设置为当前所选的id。像

var selector = new FilteringSelect({
    searchAttr:"label",  //label is property name in your data
    labelAttr:"label", 
    required:false,
    value:"selectedId",
    store: dojo.store.Observable(new dojo.store.Memory({
        idProperty:"name",   //if your store key property is not "id", instead of it is "name", you can set like this
        data: []    
    }))
    }, dojo.create("span", null, yourDiv)
);

您可以使用

selector.get('value);
selector.set('value', yourValue); 

不建议直接在代码中使用_setValueAttr和_set。

希望得到这个帮助。