基于ExtJS框架的查询组件

项目中导航树上需要实现添加查询树菜单节点的功能,并且导航树上的查询input样式要求为Web上常见的查询input样式,即input右边包含放大镜的图片,并带有默认查询提示,用户输入查询条件通过回车实现查询。
于是本人开始着手开发一个基于ExtJS框架的样式为web上常见查询Input的查询组件。
本组件包含以下几个重点:
1.监听Input标签元素的回车事件,通过配置组件的handler方法,执行回车查询动作。
2.提供doAction方法手动执行查询动作(即调用回车事件的实现方法)。
3.通过组件提供的getValue方法可以获取Input标签的value。
4.提供onDestroy方法,在组件destroy的时候自动调用,有效回收组件的相关内存。
效果如下图:

阅读余下全文 »

【CSS菜鸟实践之旅二】制作带子菜单的主导航

上一篇文章我们通过制作一个简单的主导航了解到制作主导航所涉及的HTML标签和CSS属性,对于主导航的制作有了较深的了解。这一篇文章通过制作一个带有子菜单的主导航,继续加深对于主导航的了解和相关CSS技术的理解。
先来看看实践效果:

Demo示例地址:带有子菜单的主导航
制作总结:
1.伪类的应用需分清。
CSS实现子菜单就是利用:hover伪类实现的。
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

2.【display: block】显示为块级元素,需加深理解。
3.【position: relative】和【position: absolute】位置属性,本人感觉掌握较为困难。
4.【white-space: nowrap】文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
通过两个简单的导航,学习较多的CSS相关知识点,接下来我将要针对这两篇文章总结的内容带着疑问和实践去弄清楚。

【CSS菜鸟实践之旅一】制作简单的主导航

近期进入公司的一个比较重要的项目做web框架和框架组件的相关工作,需要初步搭建一个web框架用于展示报表成果。由于公司里使用ExtJS框架的主题都是经过覆写以满足公司风格的,因此过程中需要处理一些CSS样式。本人并没有系统的学习过CSS样式,修改起来很麻烦,结果也不尽人意,因此决定系统的学习下CSS技术,毕竟CSS技术对于Web应用开发人员来说还是非常重要的。
CSS的属性很多,属性的配置项更多,因此我决定通过制作常见的CSS效果来学习,在实践中去慢慢接触,慢慢加深印象至熟练使用。
下面就开始我的CSS实践之旅吧!
每个网站都有主要的横向导航,一般称之为主导航、首导航灯,一般情况下都在网站的最上面的,是对网站栏目页或是主要页面的链接,它可以清晰的划分网站的主要内容,那么本人就从使用CSS制作简单的主导航开始!
效果如下:

Demo示例:简单导航示例
本人是参考cnzz统计页面的主导航来制作的,对于我这个CSS菜鸟来说,总结以下几点加深印象:
1.主导航一般都是使用无序列表标签(即ul标签)来制作。
2.【display: inline】可以使列表项目(即li标签)显示为内联元素,使列表项目排列成一行显示。
3.【text-decoration: none】text-decoration属性配置为none可以取消a标签的下划线。
4.【float: left】float属性设置为left可以使列表项目在充足的长度下向左浮动,实现贴在一起的效果。
5.【border】边框属性和【font-family】字体属性,它们的可配置属性较多,需要注意。

解决MySQL重装报错问题-完全卸载MySQL的方法

在卸载MySQL进行重装的时候,可能会遇到信息为:“Could not start the service MySQL.”的错误,此错误一般是由于MySQL没有完全卸载造成的。
下面列出本人在遇到上述问题时的解决步骤:
1.控制面板里的增加删除程序内进行删除。
mysql-uninstall
2.删除MySQL文件夹下的my.ini文件,如果备份好,可以直接将文件夹全部删除。
mysql-ini
阅读余下全文 »

[ExtJS]combobox设置默认值插件

相信很多人都遇到了在ExtJS框架中设置combo组件默认值的需求,ExtJS框架并没有提供现成的配置项或者方法来解决此问题,本人认为主要是因为此种需求的应用场景有限且很难达到适应于不同场景的实现。
combo组件的设值其实很简单:

即根据index获取store里面需要设置默认值的model对象,然后调用combo组件的setValue方法即可。但是选择设值的“时机”,达到“默认值”的效果,可能就显得比较复杂了。
设置默认值的需求场景一般是在Form查询表单上,提供一个默认的查询项目。多数情况下,这种需求的combobox位于tabpanel下的form中和位于window下的form中。前者可以通过监听form的afterrender事件来实现;后者可以通过监听window的show事件来实现。
如果combobox设置默认值的需求场景很少,可以视情况在combobox组件的父容器里直接添加相关监听事件来设置默认值。如果应用场景比较多,通过插件的方式配置就比较明智了。
上一篇文章ExtJS插件详解及开发实践的结尾列出了设置combobox默认值的插件作为示范。最近,项目中遇到多个需要设置默认值的场景,正好拿过来测试使用。
阅读余下全文 »