Commoboxプロパティの詳細
Jsコード Ext.onReady(function(){ //フォームプロンプト の使用 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';//提示表示方式 /* //読み出しデータマッピングを定義します. var modelRecordDef = Ext.data.Record.create([ {name: 'name'},{name: 'value'} ]); //データソースの定義と読み出し方法 //再ページ初期化がデータのロードである場合、 という2つの方法があります.//第一、comboboxStore.load()を取り除く. //第二に、proxyではなく、データをロードする必要があるときに「comboxStore」と書きます.proxy = new Ext.data.HttpProxy({url: url}) //第2の方法は、ドロップダウンボックスのデータを柔軟に取得することができる.urlを変更できるからです. var comboboxStore=new Ext.data.Store({ //url:「../.../manageActions/actionAction!getJsons.html」 proxy: new Ext.data.HttpProxy({ url: "../../manageActions/actionAction!getJsons.html"}), //バックグラウンドに渡されるパラメータ:baseParamsのパラメータは常に存在し、paramsのパラメータはloadの場合にのみ伝達され、reloadを呼び出すと のパラメータは存在しません. baseParams:{arg:'Model'}, //読み出しフォーマット を設定 reader: new Ext.data.JsonReader({ id:"modelCboxId",root:'resultList' }, modelRecordDef), //ソートしないでください.このプロパティがtrueの場合、設定されたすべてのソートは機能しません.このプロパティは、サーバからデータを取得する場合にのみ有効です. remoteSort: true }); //並べ替え用のカラム名と並べ替え方式で、これはloadの前または次のload時に発生しなければならない. comboboxStore.setDefaultSort('name', 'ASC'); //ソート用のカラム名とソート方式、これはload位置とは関係ありません. comboboxStore.sort('name', 'ASC'); //データをロードします. comboboxStore.load(); var Cb = new Ext.form.ComboBox({ fieldLabel:'ドロップダウンボックス',//テキストフィールド を表示 valueField:'value',//ドロップダウンボックスの値ドメイン hiddenName:'cb',//真のコミット時このcomboのname displayFiled:'name',//表示ドメイン id:'CbId', //id emptyText:'--選択--',//空のテキストは表示される値 です. renderTo:'combobox',//このドロップダウンボックスをidがcomboxのdivの にレンダリングします. width:200//幅 anchor:'95.2%',//適応幅は,容器の変化に伴って変化した. selectOnFocus:true, triggerAction:'all',//「all」に設定してください.そうしないとデフォルトで「query」の場合、ある値を選択して再びドロップダウンすると、一致するオプションしか表示されません.「all」に設定すると、ドロップダウンごとにすべてのオプション が表示されます. store:comboboxStore,//ドロップダウンボックスデータソース typeAhead:true,//遅延クエリー、次のパラメータと を組み合わせます. typeAheadDelay:250//デフォルト250 editable:true,//編集可能 forceSelection:true,//ドロップダウンボックスの値しか選択できないかどうか、すなわち、入力されたドロップダウンボックスの値フィールド内にない値 は取得されません. mode:'local'//dataはローカルにデータを取得したので、'local'、デフォルトは「remote」 です. }); */ //ローカルデータの読み込み var localStore = new Ext.data.SimpleStore({ fields: ["num"], data: [["2"],["1"],["5"],["3"],["9"],["6"]], //ソートは、ローカルでデータを取得するのに有効です. sortInfo:{field:"num"} }); //並べ替え用のカラム名と並べ替え方式は、ローカルデータとサーバがデータを取るのと同じように適用されます. localStore.sort('num', 'ASC'); var localCb = new Ext.form.ComboBox({ store: localStore, renderTo: 'combobox', valueField :"num", displayField: "num", hiddenName:'number', mode: 'local', forceSelection: true, blankText:'--選択--', emptyText:'--選択--', editable: true, selectOnFocus:true, triggerAction: 'all', id:'localCombo', anchor:'95.2%', typeAhead: true, fieldLabel:'数字' }); //既存のプルダウンボックスをExtスタイル に変更 var ExtSelect=new Ext.form.ComboBox({ transform:「select」//htmlのselectコントロールid width:200//幅 }); });
Htmlコード
Ext.onReady(function(){
//
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';//
/*
// 。
var modelRecordDef = Ext.data.Record.create([
{name: 'name'},{name: 'value'}
]);
//
// ， ：
// 、 comboboxStore.load() 。
// 、 proxy， :comboboxStore.proxy = new Ext.data.HttpProxy({url: url})
// 。 url.
var comboboxStore=new Ext.data.Store({
// ：url: "../../manageActions/actionAction!getJsons.html",
proxy: new Ext.data.HttpProxy({ url: "../../manageActions/actionAction!getJsons.html"}),
// ：baseParams ， params ， load ， reload
baseParams:{arg:'Model'},
//
reader: new Ext.data.JsonReader({
id:"modelCboxId",root:'resultList'
}, modelRecordDef),
// ， true 。 。
remoteSort: true
});
// ， load load 。
comboboxStore.setDefaultSort('name', 'ASC');
// ， load 。
comboboxStore.sort('name', 'ASC');
// 。
comboboxStore.load();
var Cb = new Ext.form.ComboBox({
fieldLabel: ' ', //
valueField:'value', //
hiddenName:'cb', // combo name
displayField:'name', //
id:'CbId', //id
emptyText:'-- --', //
renderTo: 'combobox', // id combobox div
width:200, //
anchor:'95.2%', // ， 。
selectOnFocus:true,
triggerAction:'all', // "all", "query" ， ， ， ， "all" ，
store:comboboxStore, //
typeAhead:true, // ，
typeAheadDelay:250, // 250
editable:true, //
forceSelection:true, // ，
mode: 'local' // data ， 'local', "remote"
});
*/
//
var localStore = new Ext.data.SimpleStore({
fields: ["num"],
data: [["2"],["1"],["5"],["3"],["9"],["6"]],
// ， 。
sortInfo:{field:"num"}
});
// ， 。
localStore.sort('num', 'ASC');
var localCb = new Ext.form.ComboBox({
store: localStore,
renderTo: 'combobox',
valueField :"num",
displayField: "num",
hiddenName:'number',
mode: 'local',
forceSelection: true,
blankText:'-- --',
emptyText:'-- --',
editable: true,
selectOnFocus:true,
triggerAction: 'all',
id:'localCombo',
anchor:'95.2%',
typeAhead: true,
fieldLabel: ' '
});
// Ext
var ExtSelect=new Ext.form.ComboBox({
transform:"select",//html select id
width:200 //
});
});
Htmlコード