BlogJava-扬帆出海-文章分类-Js、Ajaxhttp://www.blogjava.net/liu0909/category/41260.html学习,永无止境.......zh-cnThu, 27 Aug 2009 00:34:08 GMTThu, 27 Aug 2009 00:34:08 GMT60【Ext】Grid小问题解决(不断增加中)http://www.blogjava.net/liu0909/articles/292563.html扬帆出海扬帆出海Tue, 25 Aug 2009 12:59:00 GMThttp://www.blogjava.net/liu0909/articles/292563.htmlhttp://www.blogjava.net/liu0909/comments/292563.htmlhttp://www.blogjava.net/liu0909/articles/292563.html#Feedback0http://www.blogjava.net/liu0909/comments/commentRss/292563.htmlhttp://www.blogjava.net/liu0909/services/trackbacks/292563.html 

现在的项目使用Ext2做界面布局以及表格展示，其中遇到的小问题及其解决方法记录下来，以便大家一起学习。

1、Grid滚动条

    Grid不显示水平滚动条的办法：

    在grid创建之后，或grid重新动态配置之后，加入下面两行代码即可

    this.grid.getView().mainBody.dom.style.width = this.grid.getView().getTotalWidth();
    this.grid.getView().mainBody.dom.style.height = '1px';

    注：this.grid为创建的grid

   控制滚动条位置

   grid.getSelectionModel().selectFirstRow();//第一行   
   grid.getSelectionModel().selectLastRow() ;//最后一行   
   grid.getView().focusRow(grid.getStore().getCount()-1);//指定行

2、让ExtJs的Grid单元格显示竖线

Ext GridPanel 的默认样式的单元格没有显示竖线，若要显示可在页面中加入以下CSS样式：

<style type=“text/css”>
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
</style>

然后发现竖线与表头没有对齐，有一个像素的误差，再加入样式，代码就成了这样：

<style type=“text/css”>
    /*显示竖线*/
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
    /*与表头对齐*/
    .x-grid3-row td, .x-grid3-summary-row td{
        padding-right: 0px;
    }
</style>

接着发现行间有一个像素的间隔，再改吧，代码如下：

<style type=“text/css”>
    /*显示竖线*/
    .x-grid3-cell-inner{
        border-right: 1px solid #eceff6;
    }
    /*与表头对齐*/
    .x-grid3-row td, .x-grid3-summary-row td{
        padding-right: 0px;
    }
    /*去掉行间空白*/
    .x-grid3-row {
        border-top-width: 0px;
        border-bottom-width: 0px;
    }
</style>

以后会把遇到的问题及其解决方法继续添加。。。。

扬帆出海 2009-08-25 20:59 发表评论
]]>【转载】js的继承实现方式http://www.blogjava.net/liu0909/articles/290821.html扬帆出海扬帆出海Wed, 12 Aug 2009 06:33:00 GMThttp://www.blogjava.net/liu0909/articles/290821.htmlhttp://www.blogjava.net/liu0909/comments/290821.htmlhttp://www.blogjava.net/liu0909/articles/290821.html#Feedback0http://www.blogjava.net/liu0909/comments/commentRss/290821.htmlhttp://www.blogjava.net/liu0909/services/trackbacks/290821.html 语言支持：js原生支持的继承方式 构造器的的prototype属性作为类的原型 每个该类的对象都持有一个到原型的引用 当对象中的属性不存在时 可以访问原型的属性
代码示例：
<script>
function parent(){
    this.x=10;
}
function child(){
}
child.prototype=new parent();
var childObj=new child();
alert(childObj.x);
</script>
第二种 复制型原型继承
语言支持：js new运算符的性质 当构造函数return值为非空对象时 new表达式返回return的对象
代码示例：
<script>
function parent(){
    this.x=10;
}
function child(){
    var ret=new parent();
    ret.y=20;
    return ret;
}

var childObj=new child();
alert(childObj.x);</script>

第三种 类继承 属性抄写
语言支持：for in枚举对象所有属性
代码：

<script>
function parent(){
    this.x=10;
}
function child(){
    var parentObj=new parent();
    for(var p in parentObj)this[p]=parentObj[p];
}
var childObj=new child();
alert(childObj.x);</script>

第四种 类继承 对象冒充
语言支持： 1.动态添加和删除方法 2.函数的call和apply
代码：
用语言支持1实现的类继承
<script>
function parent(){
    this.x=10;
}
function child(){
    this.parent=parent;
    this.parent();
    delete this.parent;
}
var childObj=new child();
alert(childObj.x);</script>

用语言支持2实现的类继承

<script>
function parent(){
    this.x=10;
}
function child(){
    parent.call(this);
}
var childObj=new child();
alert(childObj.x);</script>

第五种 原型抄写
语言支持：通过修改类的原型对象 可以为一类对象添加属性和方法
代码：

<script>
function parent(){}
parent.prototype.me=function(){alert("parent")};
function child(){}
for(var p in parent.prototype)child.prototype[p]=parent.prototype[p];
var childObj=new child();
childObj.me();</script>

第六种 元类
语言支持: js函数都是对象 且js函数可被构造
代码：
<script>function parent(string){
    var child=new Function("this.x=10;"+string);
    return child;
}
var child=new parent("this.y=20;");

var childObj=new child();
alert(childObj.y);
</script>

以下通过混合构造函数与原型方式来实现JS的继承功能。 Polygon为父类，Triangle Rectangle 为子类。

function Polygon (iSiders){
    this.sides = iSiders;
}
Polygon.prototype.getArea = function(){
    return 0;
}


function Triangle(iBase,iHeight){
    Polygon.call(this,3);
    this.base = iBase;
    this.height = iHeight;
}
Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function(){
    return 0.5*this.base*this.height;
}

function Rectangle(iLength,iWidth){
    Polygon.call(this,4);
    this.length = iLength;
    this.width = iWidth;
}
Rectangle.prototype = new Polygon();
Rectangle.prototype.getArea = function(){
    return this.length*this.width;
}
var triangle = new Triangle(12,4);
var rectangle = new Rectangle(22,10);
alert(triangle.getArea);
alert(rectangle.getArea);

原文：http://blog.csdn.net/lenotang/archive/2008/08/27/2840315.aspx

扬帆出海 2009-08-12 14:33 发表评论
]]>