javascript - एक्स्टजेएस 5 बाइंड कंबॉबॉक्स से चयन के लिए



extjs data-binding (1)

Textarea पृष्ठभूमि रंग है: पारदर्शी; अतिरिक्त div जिसे आप ढूंढ रहे हैं, टेक्स्ट टेक्स्ट के समान टेक्स्ट और फ़ॉन्ट के साथ, लेकिन अलग-अलग रंग हैं।

बिंदु को चित्रित करने के लिए एक संक्षिप्त उदाहरण:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper     { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight   { background-color: #9ff; color: #9ff; }
textarea     { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>

बेशक, यह टेक्स्ट diva में टाइप करते समय विशेष div को अपडेट नहीं करता है, इसके लिए आपको बहुत सारी जावास्क्रिप्ट चाहिए।

आइए एक साधारण आवेदन की कल्पना करें: उपयोगकर्ता प्रबंधन मुख्य दृश्य में हमारे पास ग्रिड में उपयोगकर्ताओं की सूची है; एक उपयोगकर्ता का चयन करने से 'संपादित करें' बटन सक्रिय हो जाएगा। हम चयनित पंक्ति को ग्रिड में bind {selection : 'selectedUser';} का उपयोग करते हुए और फिर हम 'संपादन' दृश्य में इसे पास करते हैं: Ext.create('viewName', {viewModel:{data : selectedUser}});

अब, सरल शब्दों में 'उपयोगकर्ता' मॉडल में 'नाम' और 'भाषा' है संपादन फॉर्म में 'नाम' के लिए एक टेक्स्ट बॉक्स और भाषा के लिए एक कोंबबोक्स होगा। यह कॉम्बो बॉक्स एक स्टोर से जुड़ा हुआ है जिसमें सभी भाषाओं को 'लैंगआईडी' और 'लैंगनैम' फ़ील्ड के रूप में शामिल किया गया है:

xtype: 'combobox',
displayField: 'langName',
valueField: 'langId',
bind: {
 store: '{allLangs}',
 value: '{allLangs.langId}',
 selection: '{selectedLang}'
}.

इसके अलावा 'संपादित करें' फ़ॉर्म में पाठ बॉक्स को चुने गए उपयोगकर्ता के नाम से बाँध लेंगे:

bind : {value : '{selectedUser.Name}'}

अब , afterRender इवेंट के बाद, मैं selecteUser के चुने हुए मान के रूप में langName से langName का मान सेट कर रहा हूं:

var displayValue = viewModel.get('selectedUser').get('langName');
langCombo.setValue(displayValue);

ठीक है, अब आप यह कैसे पता लगा सकते हैं कि वर्तमान रिकॉर्ड ('चुने गए उपयोगकर्ता') की भाषा बदल गई है? अगर मैं model.dirty जांच कर रहा हूँ। model.dirty संपत्ति अभी भी false भले ही भाषा का मूल्य एक जैसा न हो जैसा कि यह शुरू में था। मुझे कॉम्बोबॉक्स को बाँध कैसे करना है, जिससे कि मॉडल का dirty संपत्ति true सेट true जाए, जब चयनित मान बदला जाए?

जाहिर है कि अगर मैं name संपादित कर रहा हूं तो मॉडल में dirty संपत्ति true

पहले ही, आपका बहुत धन्यवाद।





javascript extjs data-binding