dreamwave php,thinkphp+dreamwaver技巧

0、下拉列表具有提示文字：

您喜欢吃：选择作品分类

{$vo}

1 extjs对话框中的图标

要在对话框中加个图片，很容易，首先加个样式：

然后在对话框中设置

Ext.Msg.show({

title:'Milton',

msg: 'Have you seen my stapler?',

buttons: {yes: true, no: true, cancel: true},

icon: 'milton-icon',

这里设置icon，指出其CSS样式就可以了。

2 对话框的选择，包括点不同按钮的反应

Ext.onReady(function(){

Ext.Msg.show({

title:'Milton',

msg: 'Have you seen my stapler?',

buttons: {yes: true, no: true, cancel: true},

icon: 'milton-icon',

defaultButton: 'no',

fn: function(btn) {

switch(btn){

case 'yes':

Ext.Msg.prompt('Milton', 'Where is it?', function

(btn,txt) {

if (txt.toLowerCase() == 'the office') {

Ext.get('my_id').dom.innerHTML = 'Work

Sucks';

}else{

Ext.get('my_id').dom.innerHTML = txt;

}

});

break;

case 'no':

Ext.Msg.alert('Milton', 'Im going to burn the building

down!');

break;

case 'cancel':

Ext.Msg.wait('Saving tables to disk...','File Copy');

break;

}

}

});

});

3 ext对某个DIV ID的引用，可以使用Ext.get('myid')来设置

4  EXT的日历，可以禁止使用某些日期，还支持正则表达式，如

{

xtype: 'datefield',

fieldLabel: 'Released',

name: 'released',

disabledDays: [1,2,3,4,5]

}]

上面的是禁止周6，日以外的所有日期，0为周日，6为周6

5 设置验证样式，比如：

{

xtype: 'textfield',

fieldLabel: 'Director',

name: 'director',

vtype: 'alpha'

}

vtype设置了验证样式，比如alpha只好允许字母和数字，还有email,url等

6 创建自定义验证方式

比如要创建一个验证，要输入的字符串之间有空格，则

{

xtype: 'textfield',

fieldLabel: 'Director',

name: 'director',

vtype: 'name'

}

Ext.form.VTypes.nameVal  = /^([A-Z]{1})[A-Za-z\-]+ ([A-Z]{1})[A-Za-z\-]+/;

Ext.form.VTypes.nameMask = /[A-Za-z\- ]/;

Ext.form.VTypes.nameText = 'In-valid Director Name.';

Ext.form.VTypes.name = function(v){

return Ext.form.VTypes.nameVal.test(v);

};

其中xxxxVal是用于匹配的正则表达式；xxxMask，屏蔽限制用户的输入；xxxxText:用于错误信息

7 表单中，监听回车按键的事件

items: [{

xtype: 'textfield',

fieldLabel: 'Title',

name: 'title',

allowBlank: false,

listeners: {

specialkey: function(frm,evt){

if (evt.getKey() == evt.ENTER) {

movie_form.getForm().submit();

}

}

}

8 GRID中的单元格显示函数

在某列中使用HTML和图形，比如：

{header: "Cover", dataIndex: 'coverthumb', renderer: cover_image},

function cover_image(val){

return '

';

}

9 GRID中监听某行被选择；

sm: new Ext.grid.RowSelectionModel({

singleSelect: true,

listeners: {

rowselect: {

fn: function(sm,index,record) { Ext.Msg.alert('You

Selected',record.data.title); }

}

}

}),

注意第一行为0序号

10 做一个按钮，单击时可以编辑某一行的数据

tbar: [{

// changes the title of the currently selected row usign a messagebox

text: 'Change Title',

handler: function(){

var sm = grid.getSelectionModel();

// get the selected row (if exists)

var sel = sm.getSelected();

// has something been selected?

if (sm.hasSelection()){

Ext.Msg.show({

title: 'Change Title',

prompt: true,

buttons: Ext.MessageBox.OKCANCEL,

value: sel.data.title,

fn: function(btn,text){

if (btn == 'ok'){

// set a new value for one of the

// columns in our selected row

sel.set('title', text);

}

}

});

}

}

11 在editorgrid中，判断某些行不可编辑，采用afteredit事件就可以了

listeners: {

afteredit: function(e){

if (e.field == 'director' && e.value == 'Mel Gibson'){

Ext.Msg.alert('Error','Mel Gibson movies not allowed');

e.record.reject();

}else{

e.record.commit();

}

}

注意，e.filed是判断所在的列，e.value判断所在的哪一行

12、在Ext grid中假设有一个名称为grid的对象。

(1)grid.getStore().getRange(0,store.getCount());//得到grid所有的行

(2)grid.getSelectionModel().getSelections()//得到选择所有行

(3)grid.selModel.selections.items;//得到选择所有行

(4)grid.getSelectionModel().getSelected();//得到选择行的第一行

13、extjs的gridpanel制定列的颜色

14、extjs的gridpanel制定行的颜色

阅读(2156) | 评论(0) | 转发(0) |