combobox下拉表格

 var portComboBox = new Ext.form.ComboBox({
                    id: "Client_Name",
                    name: "CustomerName",
                    fieldLabel: "名稱<font color='red'>*</font>",
                    mode: "local",
                    valueField: "Id",
                    selectOnfocus: true,
                    allowBlank: false,
                    displayField: "Name",
                    triggerAction: "all",
                    listWidth: 500,
                    pageSize: 20,
                    anchor: "60%",
                    tpl: '<div id="portListPanel" style= "height:200px;width:144px;"></div> ',
                    store: new Ext.data.SimpleStore({ fields: [], data: [[]] }),
                    listeners: {
                        specialKey: function(field, e) {
                            if (e.getKey() == Ext.EventObject.ENTER) {
                                return;
                            }
                        },
                        change: function(field, newvalue, oldvalue) {
                          
                                }
                            });
                        } //end change:
                    }
                }); //var portComboBox

                var portPanel;

                //實現collapse 事件
              portComboBox.on("collapse", function() {

                    if (portPanel != null || portPanel != undefined) {
                        portPanel.destroy();
                    }

                });

               portComboBox.on("expand", function() {
                    var comboboxvalue = portComboBox.getEl().dom.value;

                    var fieldDirection =
                                                             [
                                                                { name: "Id" },
                                                                { name: "Name" }
                                                             ]

                    var cmDirection = new Ext.grid.ColumnModel
                                                            ([
                                                                  new Ext.grid.RowNumberer({ header: "序號", width: 35 }),
                                                                  { header: "代號", dataIndex: "Id", width: 50 },
                                                                  { header: "名稱", dataIndex: "Name", width: 45 }
                                                             ]);

                    //定義數據源               
                    var Storedirector = new Ext.data.Store({
                        proxy: new Ext.data.HttpProxy({ url: "ApplyJson.aspx?Param=get" }),
                        reader: new Ext.data.JsonReader({ fields: fieldDirection, totalProperty: "totalProperty", root: "root" }),
                        baseParams: { cusname: comboboxvalue }
                    });
                    portComboBox.pageTb.bindStore(Storedirector);

                    Storedirector.reload();
                    // var button = Ext.getForm("update")
                    portPanel = new Ext.grid.GridPanel
                                                            ({
                                                                id: "portPanel",
                                                                region: "center",
                                                                layout: "fit",
                                                                renderTo: "portListPanel",
                                                                frame: true,
                                                                border: true,
                                                                cm: cmDirection,
                                                                viewConfig: { forceFit: true },
                                                                sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                                                                autoScroll: true,
                                                                height: 200,
                                                                width: 510,
                                                                store: Storedirector,
                                                                listeners:
                                                                      {
                                                                          cellclick: function() {

                                                                            var rows = Ext.getCmp("portPanel").getSelectionModel().getSelections();

                                                                              if (rows.length >= 1) {
                                                                                  Ext.getCmp("Name").setValue(rows[0].get("Name"));
                                                                                  var ApplyForm = Ext.getCmp("Apply_Form").getForm();

                                                                                  ApplyForm.findField("CustomerID").setValue(rows[0].get("Id"));
                                                                                  Client_portComboBox.collapse();
                                                                              }
                                                                          },
                                                                          keydown: function(e) {
                                                                              var rows = Ext.getCmp("portPanel").getSelectionModel().getSelections();

                                                                              if (e.getKey() == Ext.EventObject.ENTER) {
                                                                                 
                                                                                  portComboBox.collapse();
                                                                              }
                                                                          }
}//listeners
                                                            }); //portPanel = new Ext.gridPanel

                }); // portComboBox 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章