Ext ComboBox 동적 조회

Ext의combobobox는 속성 typeAhead:true가 모호한 일치를 실현할 수 있지만 처음부터 일치합니다. 만약에 사용자 정의 일치가 필요하다면 beforequery 방법을 감청하여 자신의 일치 조회 방법을 실현해야 합니다.

var gfxmComb  = new Ext.form.ComboBox({
        id : 'gfxmComb',
        store : gfxmStore,
        typeAhead : true,
        mode : 'local',
        editable : true,
        displayField :'xmMc',
        valueField :'xmBm',
        triggerAction : 'all',
        selectOnFocus : true,
        listeners : {
            'beforequery':function(e){
                 
                var combo = e.combo;  
                if(!e.forceAll){  
                    var input = e.query;  
                    //  
                    var regExp = new RegExp(".*" + input + ".*");
                    //  
                    combo.store.filterBy(function(record,id){  
                        //  record 
                        var text = record.get(combo.displayField);  
                        return regExp.test(text); 
                    });
                    combo.expand();  
                    return false;
                }
            }
        }
    });

 
코드:

var employee_store = new Ext.data.Store({
     proxy:new Ext.data.HttpProxy({url:"../Process/Form_cli_e.ashx"}),
     reader: new Ext.data.JsonReader({
        //remote:true,
        totalProperty:'totalProperty',
        root:'root',
        id:'employee_store'
     },[
            {name: 'ry_name'},
            {name: 'ry_gh'}
     ]) 
 });
  function cli_e(){
    var cli_e_box = new Ext.form.ComboBox({
        mode:'remote',
        idname:'cli_E',
        name:'cli_E',
        displayField:'ry_name',
        valueField:'ry_gh',
        store:employee_store,
            typeAhead:false,
            triggerAction:'query'
    });
    return cli_e_box;
 }

1.simplestore를 사용하면 정상 2.원격 데이터를 사용하여triggerAction:'all', 정상 3.원격 데이터를 사용하여triggerAction:'query'를 설정하면 데이터를 읽을 수 없습니다. 4.원격 데이터를 사용하여triggerAction:'query'를 설정하고combobobox에 4자를 입력하면 데이터에 불러올 수 있지만 필터링 기능이 없습니다
combo.js 
 

Ext.ns('Example');
 
Example.comboConfig = {
     xtype:'combo'
 
    // we need id to focus this field. See window::defaultButton
    ,id:'combo'
 
    // we want to submit id, not text
    ,valueField:'persID'
    ,hiddenName:'persID'
 
    // could be undefined as we use custom template
    ,displayField:'persLastName'
 
    // query all records on trigger click
    ,triggerAction:'all'
 
    // minimum characters to start the search
    ,minChars:2
 
    // do not allow arbitrary values
    ,forceSelection:true
 
    // otherwise we will not receive key events
    ,enableKeyEvents:true
 
    // let's use paging combo
    ,pageSize:5
 
    // make the drop down list resizable
    ,resizable:true
 
    // we need wider list for paging toolbar
    ,minListWidth:220
 
    // force user to fill something
    ,allowBlank:false
 
    // store getting items from server
    ,store:new Ext.data.JsonStore({
         id:'persID'
        ,root:'rows'
        ,totalProperty:'totalCount'
        ,fields:[
             {name:'persID', type:'int'}
            ,{name:'persLastName', type:'string'}
            ,{name:'persFirstName', type:'string'}
        ]
        ,url:'process-request.php'
        ,baseParams:{
             cmd:'getData'
            ,objName:'person2'
            ,fields:'["persLastName","persFirstName"]'
        }
    })
 
    // concatenate last and first names
    ,tpl:'<tpl for="."><div class="x-combo-list-item">{persLastName}, {persFirstName}</div></tpl>'
 
    // listeners
    ,listeners:{
        // sets raw value to concatenated last and first names
         select:function(combo, record, index) {
            this.setRawValue(record.get('persLastName') + ', ' + record.get('persFirstName'));
        }
 
        // repair raw value after blur
        ,blur:function() {
            var val = this.getRawValue();
            this.setRawValue.defer(1, this, [val]);
        }
 
        // set tooltip and validate
        ,render:function() {
            this.el.set(
                {qtip:'Type at least ' + this.minChars + ' characters to search in last name'}
            );
            this.validate();
        }
 
        // requery if field is cleared by typing
        ,keypress:{buffer:100, fn:function() {
            if(!this.getRawValue()) {
                this.doQuery('', true);
            }
        }}
    }
 
    // label
    ,fieldLabel:'Combo'
};
 
// main entry point
Ext.onReady(function() {
    Ext.QuickTips.init();
 
    // invalid markers to sides
    Ext.form.Field.prototype.msgTarget = 'side';
 
    // create and show window
    var win = new Ext.Window({
         id:'combo-win'
        ,title:Ext.fly('page-title').dom.innerHTML
        ,layout:'fit'
        ,width:300
        ,height:150
        ,closable:false
        ,border:false
 
        // let window code to focus the combo on show
        ,defaultButton:'combo'
        ,items:{
             xtype:'form'
            ,frame:true
            ,defaults:{anchor:'-20'}
            ,items:[{
                 xtype:'textfield'
                ,fieldLabel:'Dummy Field'
            }
                ,Example.comboConfig
            ]
        }
    });
 
    win.show();
 
}); // eo onReady
 

combo.html: 

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
  <link id="theme" rel="stylesheet" type="text/css" href="css/empty.css" />
  <link rel="stylesheet" type="text/css" href="css/icons.css" />
  <link rel="stylesheet" type="text/css" href="css/formloadsubmit.css" />
  <link rel="shortcut icon" href="img/extjs.ico" />
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  <script type="text/javascript" src="combo.js"></script>
  <title id="page-title">Combo with Remote Store by Saki</title>
</head>
<body>
  <div class="adsense" style="margin:4px">
    <script type="text/javascript"><!--
    google_ad_client = "pub-2768521146228687";
    /* 728x90, for examples ifram */
    google_ad_slot = "5477402227";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
  </div>
 
<!-- delete following line if you don not want stats included -->
<?if("examples.extjs.eu"===$_SERVER["SERVER_NAME"]){$page='combo';include("stats.php");}?>
</body>
</html>

 
Ext.form.ComboBox 종속 연결 메뉴(mode:'local[remote]')

var dwStore = new Ext.data.JsonStore({
  url:"bdzJbqk.html?m=loaddwdata",
   root:"dwresults",
   totalProperty:"dwtotalCount",
   fields:["id","name"]
});
    dwStore.load();
    
var bdzStore = new Ext.data.JsonStore({
  url:"bdzJbqk.html?m=loadbdzdata",
   root:"bdzresults",
   totalProperty:"dwtotalCount",
   fields:["id","name"]
});
var bdzcombo = new Ext.form.ComboBox({ 
       id:'bdz',
       width:60,
       listWidth:58,
       store: bdzStore,
       value: " ",   
       valueField :"id", 
       displayField: "name", 
       forceSelection: true, 
       editable: false, 
       triggerAction: 'all', 
       //mode : 'local',
       allowBlank:true 
});

var dwcombo = new Ext.form.ComboBox({ 
       width:150, 
       id:'search',
       store: dwStore,
       value: '${cdssdw}',   
       valueField :"id", 
       displayField: "name", 
       forceSelection: true, 
       hiddenName:'test', 
       editable: false, 
       triggerAction: 'all', 
       allowBlank:true, 
       emptyText:' ', 
       fieldLabel: ' ComBo',
       mode : 'remote',
       listeners:{
            select :function(dwcombo){
            bdzStore.load({params:{cdssdw: dwcombo.getValue()}});
          }
       }
});

지금 dwcombo 밑에 있는 상자를 눌렀을 때bdzcombo를 출발하여 데이터를 불러와야 합니다
나는 단지 내가 겪은 문제만 말했을 뿐, 어떻게 불러오는지에 관해서는 모두가 할 수 있다고 생각한다
나는 이런 문제에 부딪혔다. 내가 1급 메뉴를 눌렀을 때, 2급 메뉴는 데이터를 불러오지 않았다
몇 번 반복해서 시도한 후에 나는 반드시 먼저 2급 메뉴를 활성화하고 1급 메뉴를 클릭해야 2급 메뉴에 데이터를 불러올 수 있다는 것을 발견하였다
그러면 2단계 메뉴는 페이지를 불러올 때 자동으로 활성화되지 않습니까?
API에 가서 봤는데 ComboBox는 자신을 활성화할 방법이 없어요.
세심한 분들은 이게 효과가 있다는 걸 알게 될 거예요. 2급 메뉴 밑에 사실 두 칸이 있어요.
나는 비로소 내가 중요한 속성을 잊어버렸다는 것을 느꼈다. 바로'mode'
해 본 후에 과연 이 문제를 해결하였다
제가 모드를 설정했어요.'local'.
원래는 이렇다. 우리가 1급 메뉴를 눌렀을 때, select 이벤트 때문에, 이미 2급 메뉴의 데이터를 불러왔다
그럼 저희가 2급 메뉴를 눌렀을 때 서버에 가서 데이터를 가져오지 않아도 될까요?
당연히 필요 없지, 데이터를 이미 가져왔으니까.
저희는 그냥 현지에서 찾으면 돼요.
모드 기본값은remote