1.支持命名空间
Ext.namespace("Ext.dojochina"); Ext.dojochina.HelloWorld = Ext.emptyFn(); //命名空间别名 Dc=Ext.dojochina; PN=Ext.dojochina.Person;
2.Ext类继承
Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{job:"学生"}); //类实例方法重写 Ext.extend(Ext.dojochina.Teacher,Ext.dojochina.Person, {print:function(){}} )
3.字符串格式化
String.format("姓名:{0},性别:{1}",this.name,this.sex);
4.页面加载完后执行
Ext.onReady(function(){ })
5.Ext 属性
(1)事件机制: Ext.util.Observable
(2)Ext的公共属性前有read-only,表示只读,设置不起作用。
(3)Ext的配置项是指在构造函数内指定属性值进行配置构造。
例:Ext.Button({text:'确定'});
(4)renderTo:将当前对象所生成的Html对象存放进指定的对象中。
(5)handler:指定一个函数句柄,在默认事件触发时调用,此时默认事件为click.
(6)listeners:这个是在对象初始化之前,就将一系列事件进行定义的手段。
例:listeners:{"click":function(){
}};
6.Ext布局
Ext.layout.FormLayout,只有在此布局下才能正确显示文本框的标签名。
7.数据存储机制
Ext.data.JsonStore({ data:[{},{}], fields:["","",""]//fields对上面的data对象进行解析 }) store.getCount();//数据集个数 store.getAt(1).data;//指定索引的数据 store.filter(“type”,”支出”);//数据过滤,只显示类型为支出的记录 store.clearFilter();//清除过滤条件,显示全部。 Ext.util.JSON.encode(store.getAt(1).data);//对指定对象解析 JsonStore里面的data也可用远程代理取得,需显示调用store.load(); 例: proxy:new Ext.data.HttpProxy({ url:"" }) //本地数组数据存储,字段与data应一一对应。 例:Ext.data.SimpleStore({ data:[["","",""],[""],[""],[""]], fields:["","",""] }) SimpleStore也支持远程代理,将data用url取代,url返回的数据也应是Array的形式。
8.Store数据解析
(1)构建本地数据和解析的store
例:var store = new Ext.data.Store({ data:[['男'],['女']], reader:new Ext.data.ArrayReader({}, Ext.data.Record.create(["sex"]) ) })
(2)构建本地Json数据和解析的store
例:var store = new Ext.data.Store({ data:[{sex:'男'},{sex:'女'}], reader:new Ext.data.JsonReader({}, Ext.data.Record.create(["sex"]) ) })
9.表格组件GridPanel
1.外框架 2.列定义 3.选中机制 4.数据源
例:var grid = new Ext.grid.GridPanel({ store:{}, cm:new Ext.grid.ColumnModel([ {header: 'ID ',dataIndex:'uuid', width:130,sortable:true,hidden:true} ]), sm: new Ext.grid.RowSelectionModel({singleSelect:true}) });
如果grid中的store使用代理机制,应设autoLoad为true.
columnModel中如果要指定某列不能过滤或排序,设置menuDisabled为true.
如果要设置gridPanel中列不可拖动,则应设置Panel中enableColumnMove为false.
如果要将gridPanel中的数据显示在指定的FormPanel中,可以在选中事件中,
调用FormPanle的loadRecord();
10.可编辑面板
例:var grid = new Ext.grid.EditorGridPanel({ store:store, cm:[{header: 'ID ',dataIndex:'uuid',width:130, editor:new Ext.form.TextField({}) }] }) var m = store.modified;//被修改的记录 m[0].modified //第一条被修改记录的修改字段 store.commitChanges();//仅提交修改的数据提交到后台。 grid.startEditing(0,0)://第0行,第0列开始修改。
11.Ext组件化编程
PersonViewFormPanel = Ext.extend(Ext.form.FormPanel,{ constructor:function(){ PersonViewFormPanel.superclass.constructor().call(this,{ // 此处与构建FormPanel中构造函数配置一样 }) } })
12.表单字段验证
例:Ext.apply(Ext.form.VTypes,{ "age":function(_v){ var _age = parseInt(-v); if(-age<200) return true; return false; },"ageText":"该输入项必须为年龄格式" }) //然后在表单中的字段中指定vtype = "age".
13.数据提交后台
例:Ext.Ajax.request({ url:'', paramers:{}, success:function(){}, failure:function(){} })
14. Form组件
取值时可用getForm().findField(“fieldname”).getValue();
15. 日期控件(时间)
例:xtype:"timefield", fieldLable:'时间', name:'time', increment:10,//以10分钟为一个单位 format:"H:i:S"
16.Dom元素查询(Ext.DomQuery)
例:// 检索head下script元素 var array = Ext.DomQuery.select("head/script");//或head>script for(var i=0;i<array.length;i++){ alert(array[i].outHTML);//outHTML为元素的Html元素表示 } //查找span的父元素或祖父元素为div的元素 Ext.DomQuery.select("div span"); ("div+span") //查找div的直接兄弟结点span ("div[id]") //查找div下有id节点的 ("div[id]=extjs") //查找div下id名称为extjs的节点 ("div:first-child") //查找div父节点的第一个子节点 ("div:last-child") //查找div父节点的最后一个子节点 ("div:nth-child(2)") //查找div节点的第二个div节点 Ext.getDoc();//获得ext的Dom节点树 //创建元素结点 Ext.DomHelpe.append(Ext.getBody(),{ tag:"div",html:"测试元素" })
17.树型面板
例:var tree = new Ext.tree.TreePanel({ el:"tree", loader:new Ext.tree.TreeLoader({ dataUrl:"" }),root:new Ext.tree.AsyncTreeNode({ text:"根结点" }) }) 树型结构主要根据Json数据构造 leaf:true //为叶子结点(在json中构造,复选框也是在json中构造) //本地数据构建树 例:var tree = new Ext.tree.TreePanel({ el:"tree", root:new Ext.tree.AsyncTreeNode({ text:'载入结点', children:[{text:'硬件',leaf:true}, {text:'软件',children:[{},{}]}]//children可嵌套多级 }) })
18.菜单构建(在树面板中构建)
var menu = new Ext.menu.Menu({ items:[{text:'添加'}, {text:'修改'}, {text:'删除'}] }) 右击树型面板,显示菜单可添加contextmenu事件, 例:listeners:{ "contextmenu":function(_node,_e){ menu.showAt(_e,getXY());//在当前单击事件的坐标处显示菜单 menu["currentNode"]=_node;//将单击时选中的节点赋值给菜单当前结点,以进行相关操作 } } // 修改树型结点 menu["currentNode"].setText("新名称"); // 删除树型结点 menu["currentNode"].remove(); // 添加树型结点 menu["currentNode"].appenChild( new Ext.tree.AsyncTreeNode({ Text:"新结点", id:"", leaf:true // 在添加节点之前可先将menu["currentNode"].leaf=false,才可重复创建结点 }) )
注:在添加结点时需将TreeLoader的clearOnLoad设置为false,
添加完节点需将当前结点展开,menu["currentNode"].expand();