Ext.Window+Ext.grid.GridPanel

最新推荐文章于 2024-07-29 17:49:33 发布

kinglino520

最新推荐文章于 2024-07-29 17:49:33 发布

阅读量2.9k

点赞数

分类专栏： EXTJS 文章标签： function tabs autoload url button border

EXTJS 专栏收录该内容

47 篇文章

订阅专栏

注：代码提自工程，没做过多的修改，不一定能运行起来，只是贴出来共大家参考，格式太难调了请谅解，有任何疑义可以联系我。

/**/ /*
公共组建：社保经济类型选择窗口
2008.03.19 chenyanji

条件：需支持Ext.Window/Ext.TabPanel/Ext.data.JsonReader/Ext.grid.ColumnModel /Ext.data.Store/Ext.grid.GridPanel/Ext.data.HttpProxy/Ext.Element
     需加载JS ext-base.js/ext-all.js
     需加载CSS grid.css/ext-all.css  此时加载 index.css

使用规则：需要事件操作监听控件id='typeLov_btn'
        需要操作后返回对象接收控件 id='typeLov_show' 并支持.value赋值，返回值时清空重新赋值。

请求地址：/newsx/lov.do?method=getForListByMap&dmm=9016
        /newsx/lov.do?method=getForListByMap&dmm=9015&bz1=[数字，动态获取]

返回值类型：0001,0002,（最后有分号）

BUG：网络连接错误时候加载页面会出现异常,无回显功能
*/

var typeLov_type = " 社保经济类型：    <select id='typeLov_sel' onchange='select_chk(this)'> " ;
var return_str = "" ;
var typeLov_dt = 0 ;
var typeLovGrid = null ;
var typeLov_btn = " typeLov_btn " ; // 监视行为按扭名称
var typeLov_show = " typeLov_show " ; // 记录返回控件名称
document.write( " <div id='typeLov_win' style='display:none'><div id='typeLov_tabs'><div id='gridArea'></div></div></div> " );
// start
Ext.onReady( function () ... {
     try ... {
     // 弹出窗口
     // 监视动作
     var typeLov_win = null ;
     var type_button = Ext.get(typeLov_btn);
    type_button.on( ' click ' , function () ... {
         if (typeLov_win) ... {
             // typeLov_win=null;
        } else ... {
            typeLov_win = new Ext.Window( ... {
                el: ' typeLov_win ' ,
                layout: ' fit ' ,
                width: 380 ,
                 // draggable:false,
                resizable: false ,
                height: 350 ,
                closeAction: ' hide ' ,
                plain: true ,
                title: " <font color='#ffffff'>社保经济类型</font> " ,
                items: new Ext.TabPanel( ... {
                    el: ' typeLov_tabs ' ,
                    autoTabs: true ,
                    activeTab: 0 ,
                    deferredRender: true ,
                    border: false
                } ),

                buttons: [
                 ... {
                    id: ' typeLov_all ' ,
                    text: ' 全选 ' ,
                     // disabled:true,
                    handler: function () ... {
                        select_all( true );

                    }
                } ,
                 ... {
                    id: ' typeLov_reverse ' ,
                    text: ' 反选 ' ,
                     // disabled:true,
                    handler: function () ... {
                        select_all( false );

                    }
                } ,
                 ... {
                    id: ' typeLov_ok ' ,
                    text: ' 确定 ' ,
                    align: ' left ' ,
                     // disabled:true,
                    handler: function () ... {
                        check_up(typeLovGrid, " typeLovChk " );
                        typeLov_win.hide(); // 加载次数过多会导致代码两过多。。。

                    }
                } , ... {
                    id: ' typeLov_no ' ,
                    text: ' 取消 ' ,
                    handler: function () ... {
                        typeLov_win.hide();

                    }
                } ]
            } );
        }

        typeLov_win.show( this );

         // 因加载延迟，所以需要在窗口显示后才读取GRID列表默认数据，默认参数为typeLov_dt=0
    typeLov_win.on( ' show ' , function () ... {
         if ( ! typeLovGrid) ... {
             var jreader = new Ext.data.JsonReader( ... {
            } , [ ... {name: ' mc ' , mapping: ' mc ' } ,
                 ... {name: ' dm ' , mapping: ' dm ' } ]);

      var initWith = new Array();
        function   getSuitableSize() ... {
        var allwith = Ext.get( " typeLov_tabs " ).getWidth( true );
           initWith[ 0 ] = allwith - 30 ; // 控制列宽度，30为滚动条宽度
         return initWith[ 0 ];
      }
     var choModel = new Ext.grid.ColumnModel([
          ... {header: '' , width: getSuitableSize(), sortable: false , renderer:toCheckbox,locked: true ,resizable: false , dataIndex: ' dm ' }
      ]);

     var ds = new Ext.data.Store( ... {
        proxy: new Ext.data.HttpProxy( ... {
      url: ' /newsx/lov.do?method=getForListByMap&dmm=9015&bz1= ' + typeLov_dt
        } ) ,
        reader: jreader
         // autoLoad:true  //此处不用加载，等指定位置后再进行
    } );
        typeLovGrid = new Ext.grid.GridPanel( ... {
            store: ds,
            cm: choModel,
             // selModel: new checkBoxRowSelectionModel() ,
             // enableColLock:false,
            maxHeight: 260 ,
            height: 260 ,
            hideHeaders: true , // 隐藏GRID头
            enableColumnMove: false , // 禁止列拖拽
            enableHdMenu: false , // 禁止头彩旦
            trackMouseOver: false , // 禁止鼠标移动特效
            loadMask: true , // 装载动画
            stripeRows: false // 条纹
         } );
         // typeLovGrid.resumeEvents();

        // typeLovGrid.on('headerclick',function(){select_all(true);});

            typeLovGrid.render( ' gridArea ' );
            typeLovGrid.store.load();
            }
    } );

    } );
     // 自动读取类型列表
     var store = null ;
        store = new Ext.data.Store( ... {
            proxy: new Ext.data.HttpProxy( ... {url: " /newsx/lov.do?method=getForListByMap&dmm=9016 " } ),
            reader: new Ext.data.JsonReader( ... {
        } ,
            [ ... {name: ' mc ' ,mapping: ' mc ' } ,
             ... {name: ' dm ' ,mapping: ' dm ' } ]),
            autoLoad: true , // 自动加载
            remoteSort: true
        } );
    store.setDefaultSort( ' mc ' , ' asc ' );
    store.on( ' load ' , function () ... {
         var size = store.getCount(); // 获得数据数量
         if (size > 0 ) ... {
            typeLov_dt = store.getAt( 0 ).get( ' dm ' );
             for ( var i = 0 ;i < size;i ++ ) ... {
                typeLov_type += " <option id=' " + store.getAt(i).get( ' dm ' ) + " '> " + store.getAt(i).get( ' mc ' ) + " </option> " ;
            } // 循环得到每条数据的相应信息，拼接成HTML语言。
        }
        typeLov_type += " </select> " ;

         var elem = Ext.get( " typeLov_tabs " ); // 向某个区域增加对象
        elem.insertHtml( " afterBegin " ,typeLov_type, false );} );

// CHECKBOX方法，ColumnModel调用，参数固定。
     function toCheckbox(v, p, r, rowIndex, i, ds) ... {
         return " <input type=checkbox  name='typeLovChk' id='typeLovChk'  value=' " + v + " '> " + ds.getAt(rowIndex).get( " mc " );
    }


     //
    } catch (ecception) ... {
    }
} );
// end

// 全选/不选
function select_all(obj) ... {
     var size = typeLovGrid.store.getCount();
     if (size > 0 ) ... {
         var box = document.getElementsByName( ' typeLovChk ' );
         for ( var i = 0 ;i < size;i ++ ) ... {
             if (obj) ... {
                 if ( ! box[i].checked) ... {
                    box[i].checked = true ;
                 } else ... {
                      // box[i].checked=false;
                 }
             } else ... {
                  if ( ! box[i].checked) ... {
                    box[i].checked = true ;
                 } else ... {
                     box[i].checked = false ;
                 }
             }
        }
    }
}


// 刷新GRID
function select_chk(obj) ... {

        typeLovGrid.store.proxy = new Ext.data.HttpProxy( ... {
             url: ' /newsx/lov.do?method=getForListByMap&dmm=9015&bz1= ' + obj.options[obj.selectedIndex].id
        } );
        typeLovGrid.store.load();
        typeLovGrid.getView().refresh();
}
// 提交方法，返回CHECKBOX信息并设置到父窗口中
function check_up(gr,id) ... {
     try ... {
     var size = gr.store.getCount();
    return_str = "" ;
     if (size > 0 ) ... {
         var box = document.getElementsByName(id);

         for ( var i = 0 ;i < size;i ++ ) ... {
             if (box[i].checked) ... {
                return_str += box[i].value + " , " ;
             }
        }
    }
         window.parent.document.getElementById(typeLov_show).value = return_str; // 赋值

    } catch (exctption) ... {}
}
// 控制按扭状态，未使用
function changeBtnStation() ... {
      var count = checkCount( " typeLovChk " );
         if (count > 0 ) ... {
               // setDisabled("typeLov_ok",true);
        } else ... {
               // setDisabled("typeLov_ok",false);
        }
  }
// 选择数量，未使用
function checkCount(name) ... {
     var box = document.getElementsByName(name);
     var len = box.length;
     var count = 0 ;
     for ( var i = 0 ; i < len;i ++ ) ... {
      if (box[i].checked) ... {
            count += 1 ;
     }
   }
    return count;
}
// 控制某对象状态，未使用
function setDisabled(id,v) ... {
   var el = document.getElementById(id);
   if (v) ... {
       el.style.display = " block " ;
    } else ... {
       el.style.display = " none " ;
    }
}