ext组件学习

David Chen`s Blog Extjs-ComboBox默认选中值的问题在ext的combobox中, 我想在 update一条record的时候自动选中下拉框中的一个值, 貌似ext的combo不支持这个功能, 只能显示出默认的值,都不能保存默认的值. 先看看它的属性: new Ext.form.ComboBox({ fieldLabel: '学校', editable: false, hiddenName: 'schoolId', //生成一个 hiden的input, name='schoolId' readOnly: true, triggerAction: 'all', value: obj.schoolName, // combobox的显示值, 因为它是用 div的input模仿的,input的value就是这个value了 // 这个value并不是记录schoolId的,只用于显示,所以没用 displayField: 'schoolName', //对应的 store中的 field name设置 valueField: 'schoolId', //对应的store中的 field name设置 }); 我只能找到这些相关的 property设置, 实现找不到一个像 hiddenValue 这个的属性了, 没法子, 唯有变通一下, 加一个 Ext.form.Hidden, 用于记录选中和默认的 schoolId new Ext.form.Hidden({ id: 'schoolId_f', name: 'schoolId', value: obj.schoolId //update的时候记下原来选中的值 }); 给上面的combobox添加监听事件, 监听选值的改变 listeners: { select: function(combo, record, index) { // 该事件会返回选中的项对应在 store中的 record值. index参数是排列号. Ext.getCmp('schoolId_f').setValue(record.get('schoolId')); // 更改 hidden的值, } } 用上面的方法就可以了, 实现在更新的修改时给comboBox设置默认的选中值. 关于hibernate与sqlserver链接启动慢的问题前两天配好项目的开发环境后, 发现 hibernate与sqlserver相链接后,启动生成sessionFactory所销的时间非常之久, 不知什么原因,就放着不理了,这天,大家终于受不了啦,每次debug都要关掉, 然后再开,等待的时间用了差不多5分钟, 受不了,一定要搞定它.. 摸索了n分钟,终于在 hbm.xml中找到一个问题, DTD定义竟然还是 2.0的? 我们用的 hibernate包是 3.0的怎么会有2.0的呢, 一想,是用Middlegen 生成的, 靠, 它居然用 2.0的dtd, 马上改成 3.0的dtd, 因为在 hibernate3的包有 3.0的dtd定义, 但没有 2.0的dtd定义, 马上就在本地找到了, 不用发http请求, 果然快了很多.. 对struts的国际化i18n功能的再一次记录,多个语言包的使用注意，struts是根据ie的语言来定位语言文件的，而不是根据语言和国家来定的，例, new Locale(String language, String country) Language.properties // 繁体 zh-TW Language_zh_CN.properties // 简体 zh-CN Language_en_US.properties // 英语 en-US 这时，如果ie的语言设置为 zh-HK, 即上面3个properties没有zh_HK, 这时候struts会使用Language_zh_CN.properties作语言,因为zh是language, hk是country, 但当ie语言设置为 aa-bb 的时候,会用Language.properties做语言,因为语言aa 找不到。同时，如果在页面中有一句：如果在 Language_zh_CN.properties中找不到a.b.c的话，会自动查找Language.properties 多个语言包的实现，或多个资源文件i18n的实现在src 下有两个资源包 Language.properties, Language_zh_TW.properties LanguageWestpanel.properties, LanguageWestpanel_zh_TW.properties Language是放所有的，默认的， LanguageWestpanel是只存放左面板的语言要实现分开存储，就要 web.xml 中配置ActionServlet的时候加上

application

Language, LanguageWestPanel

在struts中的配置 // 这是默认使用的 // 表明要使用的资源包在jsp中指定使用某个properties中的内容 Extjs-Slider和GroupView的使用例子在下面的截图中,当拖放Slider后,自动展开GridPanel中对应的group, 这里只列出Slider的js代码,不列出html和css的代码, 也不列出groupPanel的代码了 new Ext.Slider({ renderTo: 'custom-slider', frame: true, width: 340, increment: 1, // 增量值 minValue: 0, // 最小值 maxValue: 9, // 最大值 onClickChange : function(local){ // 必须重写它的onClickChange事件以监听点击改变值的情况 if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){ this.setValue(Math.round(local.left/this.getRatio())); } // 这里是监听代码, for test alert(e); } }); var prevGID = null; //用于记下展开的gid, 以收缩起来 var s = function(slider) { try { var v = weekGrid.getView(); // gridPanel的id为'weekGrid', 这里是取得对应的groupView if( prevGID ) { //先收起一次展开的 v.toggleGroup(prevGID, false); // 将prevGID对应的group收缩起来 } var gid = v.getGroupId( (parseInt(slider.getValue()) + 1) + '' ); // 通过分组的field取得该groupView中的组的 gid值, 记得这种情况是slider.getValue()) 是对应 groupView中按某个field分组的值 if( gid ) { v.toggleGroup(gid, true); //展开该组 prevGID = gid; // 记下当前展的 gid } } catch(e) {} } Extjs-Silder的使用 Silder 是2.1出的,没有任何api说明,最好去看看它的源码, 还是css和和BoxCompanet的实现. 我去看了example的例子,发现没法监听事件,也想改改样子,代码如下: 这是html代码

CSS Customized Slider

这是js代码, new Ext.Slider({ renderTo: 'custom-slider', width: 214, // 和上面定义的 html一样 increment: 1, minValue: 0, maxValue: 9, plugins: new Ext.ux.SliderTip({ getText : function(slider){ // 用于 tip 的显示内容 //return slider.getValue(); return (parseInt(slider.getValue()) + 1) + ''; }, listeners: { // 这里无用的，只有重写面的 init函数才行, 没法监听, dragend: function(slider) { alert(1); } } }) }); 跟着要引用 examples/slider中的slider.js,重写 init函数 init : function(slider){ slider.on('dragstart', this.onSlide, this); slider.on('drag', this.onSlide, this); slider.on('dragend', function(slider) { alert(slider.getValue()) }, this); // 取得值, 只有重写这个方法在拖放结束后取得最终的value slider.on('destroy', this.destroy, this); }, 关于使用url-rewrite可能出现的二次http request的问题关于使用url-rewrite可能出现的二次http request的问题昨天在首页print了一句debug的代码,发现print了两次,,,但我的操作只有一次,为何 ? 经测试,发现了出现在一句 js 上,这句js的url-rewrite使http请求发生了两次 web.xml中的着首页的mapping配置:

IndexReWriter

/WEB-INF/jsp/frontend/index.jsp

IndexReWriter

/index.htm

js: var html = “ ”; // src 是空的 document.write(html); 原因: 空的 src, ie不理,依然请求 img ,这样就出现了在 http:// 根下的 img路径.. ie就会请求根目录, ,等于这个页面被 request了两次. Extjs-GridFilters重写里面的buildQuery和cleanParams方法关于gridfilters的用法,请参考我的上一篇文章: Extjs-GridFilters的使用与发现和PagingToolbar共用的bug 这里要重写它的两个方法是因为我觉得传递到server的参数形式对php来说比较合适,但用于java,struts的时候,就比较别扭了,buildQuery是生成查询参数和值的方法, cleanParams 也必须重写,不然在取消息这些查询条件的时候, 就没法子实现了,但是一般都用到了分页,所以又要保留PagingToolbar的两个分页参数. filter[0][data][value] 55 filter[0][data][type] numeric filter[0][field] id filter[0][data][comparison] eq var filters = new Ext.grid.GridFilters({ //autoReload: false, filters:[ {type: 'numeric', dataIndex: 'id'}, {type: 'string', dataIndex: 'name'}, {type: 'date', dataIndex: 'date1'}, {type: 'string', dataIndex: 'occupation'} ], cleanParams: function(p) { // 清除参数的方法，要保留PagingToolbar分页用的两个参数 //var regex = new RegExp("^" + this.paramPrefix + "/[[0-9]+/]"); for(var key in p) { if( key != 'start' && key != 'limit' ) //if(regex.test(key)) { delete p[key]; //} } } buildQuery: function(filters) { // 重写生成query的安符串， var p = {}; for(var i=0, len=filters.length; i,=的功能，而boolean则有 yes,和no两个options选择，当然也可以自定义options, 选择不同的option后，会做为参数和值传递到store中，如果是ajax,会自动刷新store,并将参数传递. 注意要将 grid-filter的example中的grid,img,menu几个文件夹copy到相应的目录下,否则会看不到图片的 Ext.menu.RangeMenu.prototype.icons = { gt: './extjs/img/greater_then.png', lt: './extjs/img/less_then.png', eq: './extjs/img/equals.png' }; Ext.grid.filter.StringFilter.prototype.icon = './extjs/img/find.png'; Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); // 注意要先调用上面的代码， var filters = new Ext.grid.GridFilters({ filters:[ // 这些列应和grid中的columns对应，而不应和store对应 {type: 'numeric', dataIndex: 'id'}, // 定义一个数字的filter,对应ColumnModel的列为 id 列 {type: 'string', dataIndex: 'company'}, {type: 'numeric', dataIndex: 'price'}, {type: 'date', dataIndex: 'date'}, { type: 'list', // 定义为list类型 dataIndex: 'size', options: ['small', 'medium', 'large', 'extra large'], // 自定义显示的选项,未有找到相关的api说明，可能option也像html select的option一样,有text和value属性 phpMode: true }, {type: 'boolean', dataIndex: 'visible'} ]}); 在GridPanel中添加这项，plugins: filters, 注章，如果bbar指定了PagingToolbar的值，要注意给 PagingToolbar 的plugins: filters也要同样定义，这样才能将选择后的参数传递 filter传递到server端的参数名称是这样的: parameterName parameterValue filter[0][data][value] 55 filter[0][data][type] numeric filter[0][field] id filter[0][data][comparison] eq 所以，不合一般应用，可修改GridFilters类的buildQuery 函数发现了2.1在PagingToolbar中使用filter后的bug PagingToolbar的 onLoad这个function有bug,在store第一次加载的时候,如果 store.load() 不指定 {params:{start: 0, limit: 15}} 作参数, 在o.params[this.paramNames.start]得到undefine的值, 解决方法: 1) 第一次加载store的时候指定 {params:{start: 0, limit: 15}} 对象做参数 2) 重写getPageData,在前面加上this.cursor = Ext.num( this.cursor, 0 ); 明天的多哈圣火广州传递路线图传递路线广州白云国际会议中心（起点）→云城东路→白云大道→白云山西门→山顶公园 →云台花园→麓湖路→广州艺术博物院→环市路→小北路→应元路→吉祥路→中山纪念堂→连新路→应元路→解放北路→南越王博物馆→流花路→人民北路→东风西路→康王路→陈家祠→中山六路→中山五路→人民公园→北京路→天字码头→沿江路→海珠广场→海珠桥→南华东路→滨江横路→滨江东路→海印公园→中大北门广场→广州大桥→宏城公园→临江大道→华穗路→金穗路→华夏路→黄埔大道→体育东路→广州天河体育中心东大门→广州天河体育中心南门广场（终点）。 Extjs-Window和MessageBox的使用就五一了,再整理了一下extjs方面的类,窗口和对敌话框的使用,窗口比较灵活,可以在里面添加更多的组件, 就好像使用panel一样使用window var win = new Ext.Window({ width: 400, height: 300, title: 'Please login ...', draggable: true, // 是否可以拖放 closable: false, // 不能关闭 modal: true, // 是否为模式对话框 items: [ // 容器 new Ext.form.TextField({ fieldLabel: 'test' }), { pressed:true, text: 'test', handler: function(){ } } ] }); win.show(); // 显示出来 MessageBox更加简单易用 Ext.Msg.alert('Status', 'Changes saved successfully.'); // 提示, 第一个参数指明图标的内容 Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ if (btn == 'ok'){ // process text value and close... } }); // 对话输入框, 最后一个是回调参数, 当点击对话框的按纽后触发 Ext.Msg.show({ // 一般的弹出信息窗口 title:'Save Changes?', msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?', buttons: Ext.Msg.YESNOCANCEL, fn: processResult, animEl: 'elId', icon: Ext.MessageBox.QUESTION }); Extjs-ViewReport与Resizable的使用 ViewReport VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。 region: (string) 在ViewPort的items里面放panel的时候,panel多了一个属性region,取值为center,west,north,east,south, 至少要指定一个center属性,不然会出错。如果panel中指定了 collapsible: true, 那么会自动出现 expand/collapse toggle button, 上下收展或左右收展的按纽, region: 'west',那么就变成了左右收展的按纽, region: 'north'又变成了上下收展的按纽 split: (bool) 同时pnael也多了一个属性split,如果为true,则会自动给panel之间添加间隔, 且该split是可以拖拉的 viewpoort.render(); // 如果 vewport中有的组件被拖到别的地方，调用这个可以使用组件返回原来位置 ---------------------------------------- Resizable 因为Resizable第一个参数是 html Id,所以必须在该Id已经render到body中后才使其变为可缩放对象如果是一个grid要通过store来加载数据的，那么grid的height是有可能变化的，应该在store在load 了的时候给grid设为可缩放, Resizable初始的高度可能是错误的。 function resizeable() { new Ext.Resizable("grid_id", { handles: 's', /* 'n' north, 's' south,'e' east,'w' west,'nw' northwest, 'sw' southwest,'se' southeast,'ne' northeast,'all' */ pinned:true, //总是显示,false,就当鼠标移上时显示 dynamic: true, minWidth: 200, minHeight: 200, maxWidth: 500, maxHeight: 500 }); } // 给store添加load完毕后的监听器 store.addListener('load', function() { resizeable(); }); 学extjs已经了解基本了,可以进行项目开发,把总结的一些小点列出来一下以下是学习过程中记下来的一些小技巧,一定会有错,不保证全对,因为我也刚接触,只是将我的经验列一下. 1) 如果组件之间嵌套比较多的话，外面的Contaner 应尽量不要使用的 renderTo的属性来加载到某个div的id中, 应尽量在定义了Contaner后，用obj.render('id') 这个方面来加载组件，可以减少错误 2) 最好在最外层的Contaner组件(不是页面html,是extjs组件)定义with,不用定义height, 然后里面的一些组件比如panel等可以定义autoWidth: true, autoHeight: true, 就可以使用整个显示自动适应了。 3) 要用到鼠标移上后出现提示框的都要先执行这句 Ext.QuickTips.init(); 4) 注意 Ext.onReady 的使用 5) 如果有全局函数或全局的属性，不要放到onReady里面，即使只有onReady里面的对象调用了某个function,不然会提示函数未定义，在onReady外定义全局函数，如果函数用到某个对象，可以用Ext.getCmp来取得ExtComponent,同样的，即使是全局变量也一样，如果有iframe要调用parent中的变量，那更加要注意，这个变量只能定义在onReady外面，而且该变量的赋值不能在onReady的结束处用getCmp等来赋值，要在某个具体的动作才赋值，比如按纽点击等。 6) 如果TabPanel有tab是用html: '