extjs - डेटाबेस से कंघोबॉक्स में मूल्यों को कैसे लोड करें




combobox (3)

कॉम्बो बॉक्स के स्टोर में डेटाबेस से हार्ड कोडिंग के बजाय मैं कॉम्बो बॉक्स वैल्यू कैसे अर्जित करूं

{
    xtype: 'fieldset',
    title: 'Dress Types',
    items: [
        {
            xtype: 'combobox',
            displayField: "displayName",
            valueField: "displayName",
            emptyText: 'Select Type',
            store: {
                fields: ["id", "displayName"],
                data: [
                    { "id": "1", "displayName": "Kurtha" },
                    { "id": "2", "displayName": "Denim Top" },
                    { "id": "3", "displayName": "Western T shirt" },
                    { "id": "4", "displayName": "Sleeveless" }
                ]
            },
            name: 'dresses',
            margin: '15px',
            allowBlank: false,
            forceSelection: true,
        }
    ]
}

अग्रिम में धन्यवाद


Answers

नीचे दिए गए कोड की जांच करें

 Ext.create('Ext.form.ComboBox', {
    valueField: "displayName",
    emptyText: 'Select Type',
    store: Ext.create('Ext.data.Store', {
        fields: ["id", "displayName"],
        proxy: {
            url: 'data1.json',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        },
        autoLoad: true
    }),
    name: 'dresses',
    margin: '15px',
    allowBlank: false,
    forceSelection: true,
    renderTo: Ext.getBody()
});

मैंने नीचे की तरह मेरी सेवा retaining डेटा ग्रहण किया

{
"data": [{
    "id": "1",
    "displayName": "Kurtha"
}, {
    "id": "2",
    "displayName": "Denim Top"
}, {
    "id": "3",
    "displayName": "Western T shirt"
}, {
    "id": "4",
    "displayName": "Sleeveless"
}]
}

ऐसे तरीके हैं जिसके द्वारा आप यह प्राप्त कर सकते हैं। आपको अपने इनपुट डेटा से अपने जेएस में एक स्टोर बनाने और कॉम्बो बॉक्स पर आवंटित करना होगा।

उदाहरण दिया गया

var combstore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            fields: [{
                name: 'value',
                mapping: "ITEMID",
                type: 'string'
            }, {
                name: 'name',
                mapping: "TITLE",
                type: 'string'
            }],
            proxy: new Ext.data.HttpProxy({
                type: 'ajax',
                actionMethods: {
                    read: "POST"
                },
                url: Your URL,
                headers: {
                    'Accept': 'application/json; charset=utf-8'
                },
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                },
                autoLoad: true
            })
        });

अब आपके combstore आप इस combstore को अपने store कॉल कर सकते storestore :combstore

चर कम्बोस्टोर में हम Ext.data.Store का उपयोग करके एक डेटा स्टोर का निर्माण कर रहे हैं और फ़ील्ड में मूल्य डालकर। फिर प्रॉक्सी पद्धति में यूआरएल को बुला रहा है और फ़ील्ड से मानों के मानचित्रण में है। डॉक्टर को बेहतर समझने के लिए पढ़ें


मैंने अगले दृष्टिकोण का इस्तेमाल किया

 <UserControl.Resources>
    <DataTemplate x:Key="SelectedItemTemplate" DataType="{x:Type statusBar:OffsetItem}">
        <TextBlock Text="{Binding Path=ShortName}" />
    </DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
    <ComboBox DisplayMemberPath="FullName"
              ItemsSource="{Binding Path=Offsets}"
              behaviors:SelectedItemTemplateBehavior.SelectedItemDataTemplate="{StaticResource SelectedItemTemplate}"
              SelectedItem="{Binding Path=Selected}" />
    <TextBlock Text="User Time" />
    <TextBlock Text="" />
</StackPanel>

और व्यवहार

public static class SelectedItemTemplateBehavior
{
    public static readonly DependencyProperty SelectedItemDataTemplateProperty =
        DependencyProperty.RegisterAttached("SelectedItemDataTemplate", typeof(DataTemplate), typeof(SelectedItemTemplateBehavior), new PropertyMetadata(default(DataTemplate), PropertyChangedCallback));

    public static void SetSelectedItemDataTemplate(this UIElement element, DataTemplate value)
    {
        element.SetValue(SelectedItemDataTemplateProperty, value);
    }

    public static DataTemplate GetSelectedItemDataTemplate(this ComboBox element)
    {
        return (DataTemplate)element.GetValue(SelectedItemDataTemplateProperty);
    }

    private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var uiElement = d as ComboBox;
        if (e.Property == SelectedItemDataTemplateProperty && uiElement != null)
        {
            uiElement.Loaded -= UiElementLoaded;
            UpdateSelectionTemplate(uiElement);
            uiElement.Loaded += UiElementLoaded;

        }
    }

    static void UiElementLoaded(object sender, RoutedEventArgs e)
    {
        UpdateSelectionTemplate((ComboBox)sender);
    }

    private static void UpdateSelectionTemplate(ComboBox uiElement)
    {
        var contentPresenter = GetChildOfType<ContentPresenter>(uiElement);
        if (contentPresenter == null)
            return;
        var template = uiElement.GetSelectedItemDataTemplate();
        contentPresenter.ContentTemplate = template;
    }


    public static T GetChildOfType<T>(DependencyObject depObj)
        where T : DependencyObject
    {
        if (depObj == null) return null;

        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
        {
            var child = VisualTreeHelper.GetChild(depObj, i);

            var result = (child as T) ?? GetChildOfType<T>(child);
            if (result != null) return result;
        }
        return null;
    }
}

एक जादू की तरह काम किया। यहां बहुत अधिक लोडेड ईवेंट पसंद नहीं है लेकिन यदि आप चाहें तो इसे ठीक कर सकते हैं