??xml version="1.0" encoding="utf-8" standalone="yes"?>BlogJava-紫蝶∏飛揚↗-文章分类-目录http://www.268147.live/algz/category/39537.html我的QQ?7101519 专注于前端设?偏重于程?的开?/description>zh-cnWed, 11 Nov 2009 14:36:54 GMTWed, 11 Nov 2009 14:36:54 GMT60CSS 面学习20091016(ul 行框 块框 标签选择 ul,dl在浏览器中的默认?动框的自适应宽度和单元格里直接放内容,重设览器默认?http://www.268147.live/algz/articles/297900.html紫蝶∏飛揚↗紫蝶∏飛揚↗Mon, 12 Oct 2009 07:29:00 GMThttp://www.268147.live/algz/articles/297900.htmlhttp://www.268147.live/algz/comments/297900.htmlhttp://www.268147.live/algz/articles/297900.html#Feedback0http://www.268147.live/algz/comments/commentRss/297900.htmlhttp://www.268147.live/algz/services/trackbacks/297900.html .top{position:fixed;left:0;top:0}   //posistion属性需用left,top指定方位(q用)

?标签W的选择
多行多列?lt;table>,单行多列?lt;p style="float:left;">(一般用于标?卌选择W?另有<span>),多行单列用UL列表(或DL),
文字环绕?lt;dl>(<div style="width:(定义长点的宽度给环绕留出I间)px;"><dt style="float:left;"><img /></dt><dd>环绕dt<dd>)

?行框:元素在一行里按列一列一列显C?br /> <a>,<img>,<span>
 
?块框Qdisplay:block):元素按行一行一行显C?br /> <p>,<div>,<ul>,<li>,<dl>,<dt>

?列表?lt;ul>三个属?br /> ? 描述
list-style-type  讄列表Ҏ记的cd?br /> list-style-position  讄在何处放|列表项标记?br /> list-style-image  使用囑փ来替换列表项的标记?br />
? 描述
none  无标记?br /> disc  默认。标记是实心圆?br /> circle  标记是空心圆?br /> square  标记是实心方块?br /> decimal  标记是数字?br /> decimal-leading-zero  0开头的数字标记?01, 02, 03, {?
lower-roman  写|马数字(i, ii, iii, iv, v, {?
upper-roman  大写|马数字(I, II, III, IV, V, {?
lower-alpha  写英文字母The marker is lower-alpha (a, b, c, d, e, {?
upper-alpha  大写英文字母The marker is upper-alpha (A, B, C, D, E, {?
lower-greek  写希腊字母(alpha, beta, gamma, {?
lower-latin  写拉丁字母(a, b, c, d, e, {?
upper-latin  大写拉丁字母(A, B, C, D, E, {?
hebrew  传统的希伯来~号方式
armenian  传统的亚尼亚编h?br /> georgian  传统的乔M~号方式(an, ban, gan, {?
cjk-ideographic  单的表意数字
hiragana  标记是:a, i, u, e, o, ka, ki, {。(日文片假名)
katakana  标记是:A, I, U, E, O, KA, KI, {。(日文片假名)
hiragana-iroha  标记是:i, ro, ha, ni, ho, he, to, {。(日文片假名)
katakana-iroha  标记是:I, RO, HA, NI, HO, HE, TO, {。(日文片假名)

? 描述
inside  列表目标记攄在文本以内,且环l文本根据标记对齐?br /> outside  默认倹{保持标C于文本的左侧。列表项目标记放|在文本以外Q且环绕文本不根据标记对齐?br /> inherit  规定应该从父元素l承 list-style-position 属性的倹{?br />
?/th> 描述
URL 囑փ的\径?/span>
none 默认。无囑Ş被显C?/td>
inherit 规定应该从父元素l承 list-style-image 属性的倹{?/td>

?firefox ie 览器默认?1em=16px)      Qؓ了解x览器默认g?Q?span style="color: #339966">一般在面设计时指定内外边距ؓ0。)
h1,h2,h3,h4,h5,h6,ul,li,dl,dt,dd,p{margin:0;padding:0}
Q?Q?br />

ul{padding-left:40px;margin:1em 0;}   /* ul 标签上下外间距ؓ16px;左内间距?0px; */
p,dl{margin:1em 0;}                           /* p,dl 标签上下外间距ؓ16px; */
dd{margin-left:40px;}                         /* dd 标签左外间距?0px; */
firefox: ul dl,dl ul,.....{margin-top:0;margin-bottom:0;} /* 列表嵌套QIE中列表嵌套不讄此属性,依然是margin:1em 0; */

Q?QIE中Q何元素最高度规定ؓ19pxQ不可更攏V解x法:讄高度?9px以下的元素需指定overflow:hidden属性?/span>

?动框的自适应宽度和单元格里直接放内容
Q?QQ动则自适应内部标签最大宽?br /> Q?Q不动则自适应父标{֮?br /> Q?Q?lt;td>里直接放内容Q不用放块元?lt;p>{, <td>cM于块?/span>QdisplayQtable-cellQ?br />
?<ul>Q?lt;dl> 列表标签一般不讄背景囄{样式,只设|margin,padding边距属性,样式属性只?lt;li>Q?lt;dt>Q?lt;dd>{设|?br />
?DIV+CSS表格讄及图C?br /> http://www.268147.live/algz/articles/298591.html

?IE6 IE7 l对定位元素消失的BUG
http://www.268147.live/algz/articles/301959.html

]]>
EXTJS 学习W记(?7?20090924更新)http://www.268147.live/algz/articles/255938.html紫蝶∏飛揚↗紫蝶∏飛揚↗Sat, 21 Feb 2009 04:03:00 GMThttp://www.268147.live/algz/articles/255938.htmlhttp://www.268147.live/algz/comments/255938.htmlhttp://www.268147.live/algz/articles/255938.html#Feedback0http://www.268147.live/algz/comments/commentRss/255938.htmlhttp://www.268147.live/algz/services/trackbacks/255938.html目录
(1)头样式
(2)treenode 自定义样?br /> (3)Ext.tree.TreePanel ?span style="color: #3366ff">title,root 配置?/span>必须指定,不然囑փ在IE中显C؜?span style="color: #000000">; loader配置不指定,不显C?/span>囑փ
(4)Extjs 日期的用方?昄,接收,定义,提交)
(5)Extjs 三个主要文g错误的引? 览器无法显CExtjs效果.
(6)gridpanel加态重新加载columnModel和store
(7)tabpanel判断tab在不在
(8)panel动态加载tbar(可扩展进行g伸控制Q何DIV)
(9)Extjs 扩展l承子类(Ext.extend())
(10)Ext.data.Record c?引用和赋值问?/strong>
(11)Ext.apply 无法复制 Ext.data.JsonStore {数据源相关的类?/strong>
(12)TabPanel子窗?如Ext.Panel{?隐藏属性closable
(13)Panel ?tools 配置?/strong>
(14)Extjs 首页 "load..." 制作Ҏ
(15)Extjs 漂亮的Panel折叠伸羃控g layout:'accordion'
(16)Ext.grid.GridPanel 的columns属性和Ext.data.Store的fields属性均可ؓ数组
(17)使用XTemplate动态加载panel{组件内?/strong>




(1)头样式

 new Ext.tree.TreePanel({
         useArrows : true,//是否使用头样式


         loader : new Ext.tree.TreeLoader({ url : "tree-data.json"}),
         root : new Ext.tree.AsyncTreeNode()

(2)treenode 自定义样?/strong>
json:
[{
    text:'Basic Ext Layouts',
    expanded: true,
    children:[{
        text:'Absolute', //也可以用HTML标签
        id:'absolute',
        //icon:....   //自定义图?/span>
        cls:"tem",   //<link rel="stylesheet" href="css/tem.css" type="text/css"></link>
        leaf:true

(3)Ext.tree.TreePanel ?span style="color: #3366ff">title,root 配置?/span>必须指定,不然囑փ在IE中显C؜?span style="color: #000000">; loader配置不指定,不显C?/span>囑փ

    三个必须?  title,root ,loader
new Ext.tree.TreePanel({
           rootVisible : false,
           useArrows : true,// 是否使用头样式
           loader : new Ext.tree.TreeLoader({
              url : "tree-data.json"
             }),
           title : "tool1",
           root : new Ext.tree.AsyncTreeNode()
          }), {
         title : "tool2"

(4)Extjs 日期的用方?昄,接收,定义,提交)

http://www.268147.live/algz/articles/270359.html

(5)
Extjs 三个主要文g错误的引? 览器无法显CExtjs效果.


 正确:  <script type="text/javascript" src="script/ext/ext-all.js"></script>
 错误:  <script type="text/javascript" src="/script/ext/ext-all.js"></script>
            <script type="text/javascript" src="../script/ext/ext-all.js"></script>

(6)gridpanel加态重新加载columnModel和store
//重新l定grid
this.grid.reconfigure(newStore, new Ext.grid.ColumnModel(cm1));
//重新l定分页工具?/span>
this.pagingBar.bind(newStore);
//重新加蝲数据?br /> newStore.load({params:{start:0,limit:10}});



(7)tabpanel判断tab在不在
           var tem=tabpanel.getItem("tabpage"); //判断tab在不在.
            if(tem)
            Ext.Msg.alert("ok");
            else
            Ext.Msg.alert("not");

(8)panel动态加载tbar(可扩展进行g伸控制Q何DIV)
var pan=new Ext.Panel({tbar:new Ext.Toolbar({})....); //定义I对象容易在PANEL加蝲时没加蝲tbarQ所以会出现没有高度或隐藏v?/span>
var t=new Ext.Toolbar({...});
document.getElementById(pan.tbar.id).innerHTML = ""; //清空panel.tbar下的所有内?br /> t.render(pan.tbar); //toolpanel昄到panel.tbar(div)?/span>

(9)Extjs 扩展l承子类(Ext.extend())
var subclass=Ext.extend(XX,{   //l承Extjsc?可覆盖或d其子cȝ属性或Ҏ
xx:...,
xx:...
});
var tem=new subclass({});

(10)Ext.data.Record c?引用和赋值问?/strong>
var record=new Ext.data.Record({});
......
store.insert(0,record);  //record值勤改变.store中的g改变.
store.insert(0,record.copy);  //record值改?store中的g?record.copy()复制q回另一个记?

(11)Ext.apply 无法复制 Ext.data.JsonStore {数据源相关的类?/strong>
var store2 = new Ext.data.JsonStore({});
var store3={};
Ext.apply(store2,magazine_store); //效果无用.store2仍引用magazine_store,无法独立使用.
Ext.apply(store3,magazine_store); //效果同上.
store3=Ext.apply(store2,magazine_store); //效果同上.

(12)TabPanel子窗?如Ext.Panel{?隐藏属性closable
TabPanel子窗?如Ext.Panel,Ext.grid.GridPanel{?隐藏属性closable:true/false //昄/隐藏子窗口右上角的关闭按?br /> ?此属性只有TabPanel子窗口才有效.

(13)Panel ?tools 配置?/strong>
new Ext.Panel({...
tools:[{
    id:'refresh',  //必选项
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){     //必须?br />         // refresh logic
    }
}]
...})
API详见:  http://www.268147.live/algz/articles/277819.html

(14)Extjs 首页 "load..." 制作Ҏ
http://www.268147.live/algz/articles/277844.html

(15)Extjs 漂亮的Panel折叠伸羃控g layout:'accordion'
http://www.268147.live/algz/articles/278217.html

(16)Ext.grid.GridPanel 的columns属性和Ext.data.Store的fields属性均可ؓ数组
columns:cm    //cm=[....{...}...]    cm=new Ext.Ext.grid.ColumnModel([...])
fields:f            //f=[...]  f=new Ext.data.Record.create([...])

(17)使用XTemplate动态加载panel{组件内?/strong>
//可以采用异步q程取?br /> var board_data = {
 title : "title",
 content : ""
};
//可以是Q意组?br />     var board_w = new Ext.Window({
       id : "board_w",
       title : "公告",
       modal : true,
             });
    // 以下Ҏ Ext.fly("board_w");Ext.get("board_w")都错
    tpl.overwrite(Ext.getCmp("board_w").body, data);// 更新公告内容


]]>
3 11ѡ5ţ Ʊ 8ʵʱ ɹſ3һţ 22ѡ52033ڿ ʽӮ ݿ3ȫƻ 11ѡ5ͼ ָ֤5ͼ