extjs コンボボックスのドロップダウン リスト メニューの学習

extjs コンボボックスのドロップダウン リスト メニューの学習

⭐️何年も前のExtjsメモ。単なるアーカイブであり、更新されていません。⭐️

共通の設定項目

• emptyText: "–Please select–" //値がない場合はテキストに透かしを入れます。
• editable : false, //編集可能かどうかはデフォルトで編集可能なので追加

一般的な監視イベント

Afterrender コンポーネントのレンダリング後にトリガーされるイベント

listeners : {
    
    
	'afterrender': function(){
    
    
		Ext.Ajax.request({
    
    
				method:'post',
				url:'/JF/PolicyConfig_SqlInjectRule/getCurrentObject',
				success:function(response){
    
    
					var res = Ext.decode(response.responseText);
					//console.log(res.now_object);
					Ext.getCmp('databaseObject').setValue(res.now_object);
				}
			});
		
	},
	'change':function( combobox, newValue, oldValue){
    
    

コンボボックスのドロップダウン リスト メニューの学習

setValue メソッドを使用して、ドロップダウン リストのデフォルト値を設定します。渡されたパラメータ valueField の値は、displayField によって表示される値ではないことに注意してください。選択した値を表示できます。

Ext.getCmp('databaseObject').setValue(res.now_object);

デフォルトストアの最初の行を設定します

現在のドロップダウン メニューの選択された値を取得します。コンポーネントにはダイレクト メソッド getValue() があります。

 var currentRuleSet = Ext.getCmp('ruleSet').getValue();

コンボボックスはフィールドラベルとドロップダウンボックスの間の距離をどのように縮めますか

labelWidth:80 を設定すると、幅は表の署名の幅と同じになり、スペースはなくなります。幅が大きいほど、スペースがより明確になります。
4. ドロップダウン ボックスの幅を設定するにはどうすればよいですか?
ここでの幅は、設定したラベルの幅を含むドロップダウン ボックス コンポーネント全体の幅を指すことに注意してください。
width-labelWidth の幅が必要です

{
    
    
	xtype:'combobox',
	name:'enable',
	id:'enable',
	fieldLabel: '是否启用',
	labelWidth:60,
	width: 130,

	store:Ext.create('Ext.data.Store', {
    
    
	fields: ['value', 'enable' ],
	data : [
			{
    
    "value":"2", "enable":"全部"},
			{
    
    "value":"1", "enable":"启用"},
			{
    
    "value":"0", "enable":"关闭"}
		]
	}),
	value:'2',
	queryMode: 'local',
	displayField: 'enable',
	valueField: 'value'
},

ドロップダウン メニューをカスタマイズすると、独自の構成項目をいくつか追加し、コンポーネントの初期化時に何らかの処理を実行できます。たとえば、requirable: false、構成項目は extjs になく、自分で定義されます。

在配置该自定义的配置项后，label分割器加*并且布恩那个为空。	

Ext.define('Kitchensink.form.JautoComboBox', {
    
    
	extend: 'Ext.form.field.ComboBox',
	alias: 'widget.JautoComboBox',
	editable:false,
	requireable: false,		
	initComponent: function()
	{
    
    
		if(this.requireable)
		{
    
    
			this.labelSeparator = '：<div style="color: red;line-height: 22px;float: right">*</div>';
			this.allowBlank = false;
		}		
		this.callParent();
	}
	//multiSelect: true,//支持多选
});

ドロップダウン メニューには all が必要で、初期値が設定されていますが、ストアはサーバーからの ajax リクエスト後にすべてのコンテンツを返しません。選択した後、すべてのオプションが表示されませんか? の解き方

アイデア 1: サーバーから返されたコンテンツにすべてのオプションを追加する方法を見つける
アイデア 2: フロントエンド処理

ドロップダウン メニューの下に永続的なオプションを追加すると、イベントのトリガーを選択できるようになり、フォーム ウィンドウがポップアップして新しい xx を作成できるようになります。

アイデア: フロントエンド ストアのロード イベントをリッスンし、ストアの add メソッドを削除します。add メソッドは適切です。ドロップダウン リストの最後の項目に追加します。` // テストは成功しまし
た
。 、ドロップダウン メニュー コンポーネントで、リスナー構成項目を追加し、レンダリング メソッドをリッスンしてから取得します。コンポーネントのストア (getStore) は、ストアのロード イベント メソッドをバインドし、ストアの add メソッドを使用します。ロードメソッド

  listeners : {
    
    
  	'render':function(combo){
    
    
  		//store的load事件setValue第一行
  		combo.getStore().on("load",function(s,r,o){
    
    
  			console.log(r[0]);
  			if(typeof r[0] != 'undefined'){
    
    
  				combo.setValue(r[0].get('id'));

  			}else{
    
    
  				combo.setValue('该对象暂无规则，请新建');							
  			}
  			s.add({
    
    id: '0',name: '--新建规则--'});
  		});
  	},


		'change':function( combobox, newValue, oldValue){
    
    
			//alert(newValue);
			if(newValue == 0){
    
    
				//触发自定义事件
				this.fireEvent('addRuleSet',newValue);
			}else{
    
    
	
				var store = Ext.ComponentQuery.query('sqlinjectrulelist')[0].getStore();
				var rurl = '/JF/PolicyConfig_SqlInjectRule/getList?ruleset_id='+newValue;
				store.proxy.url=rurl;
				store.type= 'ajax';
				store.reload();
			}
			
		}
	}

上の例のように、ドロップダウン ボックスの選択イベントをリッスンします。変更イベントをリッスンできます。
newValue が必要な値である場合は、fireEvent を呼び出してカスタム イベントをトリガーします。MVC
開発モードでは、このイベントをコントロールで処理します。以下のように、次のような制御で、ここに注意してください

init: function(){
    
    
       console.log('Initialized Users! This happens before ' +
                   'the Application launch() function is called');
	var me = this;
	this.control({
    
    
//注意点：view中自定义的别名  组件类型[组件中定义name] //试过直接写sqlinjectrulelist不行，要具体到extjs组件上
		'sqlinjectrulelist combobox[name=ruleSet]':
		{
    
    
			"addRuleSet": function()
			{
    
    
				alert('xxxxxxxxxxx');
				return true;
			}
		},	
//view中的组件如下:
			xtype : 'JComboBox', //自定义 继承自'Ext.form.field.ComboBox' 别名		alias: 'widget.JComboBox',
			fieldLabel : '规则集',
			name : 'ruleSet',
			id : 'ruleSet',
			editable : false,
			displayField : 'name',
			valueField : 'id',
			queryMode : 'remote',
			store : Ext.create('Ext.data.Store',{
    
    
				fields:['id','name'],
				autoLoad:true,
				proxy:{
    
    
					type:'ajax',
					url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
				}
			}),				

問題が見つかりました: ドロップダウン リストの 1 つが初めてクリックされた後、リモート エンドからデータが取得された後、ドロップダウン リストが再び格納されました。その後、クリックではこの問題は発生しませんでした。

原因を分析したところ、コードに問題があることが分かりました。レンダリング イベントをリッスンし、コンポーネントがレンダリングされるときにストアのロード イベントをバインドしました。その後、初めてドロップダウン メニューをクリックしました。このとき、setValue を使用して最初の行を選択すると、ロード後にドロップダウン ボックスが突然引っ込むという問題が発生しました。

listeners : {
    
    
		'render':function(combo){
    
    
			//store的load事件setValue第一行
			combo.getStore().on("load",function(s,r,o){
    
    
				console.log(r[0]);
				if(typeof r[0] != 'undefined'){
    
    
					//combo.setValue(r[0].get('id'));

				}else{
    
    
					combo.setValue('该对象无规则，请新建');							
				}
				s.add({
    
    id: '0',name: '--新建规则--'});


​						
			});
		},

アイデア 1: (推奨)
考え方: ドロップダウン メニューの comobox が初めてクリックされたとき、ストアはリモート データをリクエストしますが、ページがロードされるとき、ストアはすでに ajax をリクエストしており、すでに値が存在します。コンボックス、方法 値がある場合、ドロップダウン メニューの最初のクリックでは、ストアがサーバー側からデータを ajax することはできません。

//ドロップダウンをクリックすると、ajax リクエストが行われなくなる、ページがロードされたときにのみ ajax が行われる、または独自のコードで負荷を調整できるため、私の問題は解決される可能性があります。

//queryMode : 'remote',
queryMode : 'local',

//完整代码
{
    
    
	xtype : 'JComboBox',
	fieldLabel : '规则集',
	name : 'ruleSet',
	id : 'ruleSet',
	editable : false,
	displayField : 'name',
	valueField : 'id',
	//queryMode : 'remote',
	queryMode : 'local',
	store : Ext.create('Ext.data.Store',{
    
    
		storeId:'ruleSetStore',
		fields:['id','name'],
		//autoLoad:false,
		autoLoad:true,
		proxy:{
    
    
			type:'ajax',
			url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
		}
		/*
		listeners:{
			'load':function(){
				var record = this.getAt(0).get('id');
				Ext.getCmp('ruleSet').setValue(record);
			}
		}
		*/
	}),

アイデア 2 (失敗): ストアでロード イベント ハンドラーを直接構成し、次に setValue を実行すると、結果は同じですが、ドロップダウン リストは依然として撤回されます。

store : Ext.create('Ext.data.Store',{
    
    
	fields:['id','name'],
	//autoLoad:false,
	autoLoad:false,
	proxy:{
    
    
		type:'ajax',
		url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',
	},
	listeners:{
    
    
		'load':function(){
    
    
			var record = this.getAt(0).get('id');
			Ext.getCmp('ruleSet').setValue(record);
		}
	}
}),

アイデア3: コンボックスコンポーネントのafterrenderイベントでsetValueは理論的には可能だが、なぜここで見つかった結果値が全てnullなので設定値が設定できないのか -

'afterrender':function(combo){
    
    

	//var fLine = Ext.ComponentQuery.query('[name=ruleSet]')[0].value;  //null
	//var record =  this.getStore().getAt(0).get('id');
	//失败原因：这里this指向的下拉菜单组件，没有getStore方法
	//combo.setValue(fLine);
},

分析: 理由は getStore メソッドの理解が整っていないためです。公式 API を確認して学習してください。

次のウィンドウ + フォームの例では、ウィンドウのボタン コンポーネントで this.getStore を使用しています。ここでの this はボタン オブジェクトを指しており、ボタン オブジェクトには getStore メソッドがないことを理解する必要があります。
MVC 開発でコントローラーで this.getStore を使用する前に、これは現在のコントローラー コントロールを指し、
公式 API キーワード「getStore」をクエリすると、Ext.getStore、Ext.app.Controller.getStore、Ext.app.ViewMode があることがわかりました。 .getStorel など、このメソッドがコントローラーが統合されている場合にのみ使用可能であることを示します - -

したがって、代わりにグローバル Ext.getStore を使用し、パラメーターを storeId 値として渡します。MVC 開発モードでは、これはコントローラー構成アイテム ストアによってインスタンス化されたストア名です。

getStore ( name ) : Ext.data.Store
Ext.data.StoreManager#lookup へのショートカット。登録された Store を ID で取得します。
PARAMETERS
name : Object
RETURNS :Ext.data.Store

storeId : String BINDABLE
このストアの一意の識別子。存在する場合、このストアは Ext.data.StoreManager に登録され、他の場所での再利用が容易になります。
ストアがコントローラによってインスタンス化されるとき、storeId はデフォルトでクラスで指定されていない場合はストアの名前。
デフォルトは null
storeId はストアを一意に識別する文字列です。存在する場合、ストアは店長に登録されるため、他の場所で再利用しやすくなります。
ストアがコントローラーによってインスタンス化されるとき、storeId はデフォルトでストアの名前になります (クラス内で定義されていない場合)。
これがここに当てはまります。グローバル Ext.getStore を使用して渡される storeId は、コントローラーのインスタンス化ストア。

			var dialog = Ext.create('Ext.window.Window', {
    
    
				title: '新建规则集',
				maxHeight: 400,
				name: 'add_cmd',
				width: 400,
				modal: true,
				constrainHeader: true,
				autoShow:true,
				items:[
				{
    
     xtype: 'rulesetform' }
				],
				buttons:
				[
					{
    
    
						xtype:'JButton',
						text:'保存',
						minWidth:62,
						handler:function() {
    
    
							var me = this;
							var win = this.up('window');
							var form = win.down('form').getForm();
							//var store = Ext.getStore('SqlInjectRules');  错误点
							var store = Ext.getStore('SqlInjectRules');

//在store中，我是这样定义的
	Ext.define('JUMP.store.SqlInjectRules', {
    
    
		extend: 'Ext.data.Store',
		model: 'JUMP.model.SqlInjectRule',
		/*
		data: [
		
			{ name: 'HaMaster', level: '2', enable: 'up',baseling_name:'激活' },
			{ name: 'HaMaster', level: '1', enable: 'up',baseling_name:'激活' }
		]
		*/
		pageSize: 15,

要約:

• 初めてドロップダウン リストをクリックすると、ストアは Ajax をトリガーしてリモート エンドからデータを取得しますが、その後、クリックしてもストアの Ajax リクエストはトリガーされません。簡単に言えば、これはドロップダウン メニューであり、最初のクリックでストアの読み込みイベントがトリガーされます。
• getStore はどのコンポーネントでも使用できません。コントロール内で直接使用できます (これはコントロール オブジェクトを指します)。他のコンポーネントの場合は、グローバル Ext.getStore を使用して取得し、パラメータを storeId 値として渡します
  。 、MVC 開発モードでは、コントローラーはすぐに構成されます アイテムストアによってインスタンス化されたストアの名前; それ
  以外の場合は、構成アイテム storeId:'xxx' をストアに追加し、ストアに ID を与えます

ドロップダウン ボックス コンポーネントの setValue についての理解

displayField : 'name',
valueField : 'id',
//queryMode : 'remote',
queryMode : 'local',
store : Ext.create('Ext.data.Store',{
    
    
	storeId:'ruleSetStore',
	fields:['id','name'],

問題: setValue(key) メソッドを使用して値を割り当てると、表示されるキーがそのキーに対応する値ではない場合があります。
setValue()はコンボボックス内のデータが読み込まれていることが前提となっており、レコードがない場合はキーが直接表示されます。

アイデア 1: この場合、通常は、ドロップダウン コンポーネント ストアにそれをロードさせ、サーバーから最新のデータを再度取得します。サーバーから返されたデータは、データベース内の ID によって降順に並べ替えられます。この時点では、監視対象ストアのロード イベントが setValue の最初にあります。OK; この場合、ストアには完全な情報があり、setValue には問題ありません。
Ext.getCmp('ruleSet').getStore().load();

	listeners : {
    
    
			'render':function(combo){
    
    
				//store的load事件setValue第一行
				combo.getStore().on("load",function(s,r,o){
    
    
					//console.log(r[0]);
					if(typeof r[0] != 'undefined'){
    
    
						//for void list back 
						combo.setValue(r[0].get('id'));

					}else{
    
    
						combo.setValue('该对象无规则，请新建');							
					}
					s.add({
    
    id: '0',name: '--新建规则--'});


​					
				});
			},

ドロップダウン リストの最初の行にオプションを追加します。

上記の例のように、ストアの追加でドロップダウンメニューの最終行に操作ストアを追加していますが、先頭行に追加する方法はあるでしょうか？

要約:

• 通常、ドロップダウン メニューには、displayField と valueField の 2 つのフィールドがあります。setValue で設定したものは value 値であり、ストアにこの完全なレコードがある場合は表示値が自動的に表示されます。それ以外の場合は、setValue が表示する内容がすべて表示されます (この時点で)。時間、Ajax リクエストによって送信されたパラメータ値は setValue の値でもあり、問題が発生します。実際に送信したい valueField の値ですが、現時点では値がありません）

したがって、レコードが不完全で、(Ajax のこの選択に基づいていない) 特定のコンテンツだけを表示したい場合は、setValue を使用することがベスト プラクティスであり、それ以外の場合は、完全なデータをロードするのが最善です。