uniGUI学习之脱离Delphi直接写ExtJS从⼊门到精通02Ext.Panel创建
后。。。
<link rel="stylesheet" href="theme-graphite-all.css">
<script src="ext-all.js"></script>
<script&Ready(function () { /*---------------------------------------------------------------------------------*/
renderTo: 'helloWorldPanel',
height: 200,
delphi appwidth: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
}); </script><!------------------------------------------------------------------------------------------------------->
<div id="helloWorldPanel"/><!--调⽤-->
renderTo: Body(),
height: 200,
width: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
这个只能window类才特有
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{header: 'World'}], // One header just for show. There's no data,
store: ate('Ext.data.ArrayStore', {}) // A dummy empty data store
}
}).show();
<link rel="stylesheet" href="theme-graphite-all.css">
<script src="ext-all.js"></script>
<script>
text: 'Click me点我呀',
renderTo: 'aButton',
handler: function() {
alert('You clicked the button!');
}
});
});
</script>
<body>
<div id="aButton"/>
</body>
aButton
<link rel="stylesheet" href="theme-graphite-all.css">
<script src="ext-all.js"></script>
<script>
// Creation of data model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
/
/ Store data
var myData = [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "68" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
// Creation of first grid store
var gridStore = ate('Ext.data.Store', {
model: 'StudentDataModel',
data: myData
});
// Creation of first grid
id : 'gridId',
store : gridStore,
stripeRows : true,
title : 'Students Grid', // Title for the grid
renderTo :'gridDiv', // Div id where the grid has to be rendered
width : 600,
collapsible : true, // property to collapse grid
enableColumnMove :true, // property which alllows column to move to different position by dragging that column.
enableColumnResize:true, // property which allows to resize column run time.
columns :
[{
header: "Student Name",
dataIndex: 'name',
id : 'name',
flex: 1, // property defines the amount of space this column is going to take in the grid container with respect to all.
sortable: true, // property to sort grid column data.
hideable: true// property which allows column to be hidden run time on user request.
},{
header: "Age",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false// this column will not be available to be hidden.
},{
header: "Marks",
dataIndex: 'marks',
flex: .5,
sortable: true,
/
/ renderer is used to manipulate data based on some conditions here who ever has marks greater than 75 will be displayed as 'Distinction' else 'Non Distinction'.
renderer : function (value, metadata, record, rowIndex, colIndex, store) {
if (value > 75) {
return "Distinction";
} else {
return "Non Distinction";
}
}
}]
});
});
</script>
<body>
<div id = "gridDiv"></div>
</body>
aStringGrid
blog.csdn/xiaozhegaa/article/details/82811061
1、什么是ExtJs？ What
ExtJS是⼀个Ajax框架，是⼀个⽤JavaScript写的，⽤于在客户端创建丰富多彩的web应⽤程序界⾯。
说⽩了，就是基于JavaScript开发的组件库，这个组件库提供⾮常多的组件，我们直接使⽤这些组件就可以搭建出丰富多彩的应⽤程序界⾯。
2、为什么要⽤ExtJs? 优点缺点 Why
优点：浏览器兼容好、提供精美的UI组件、不再需要我们去写Css样式即可开发出精美的页⾯。
缺点：有点重量级、加载速度慢、收费是很致命的，在ExtJS6.X中，没有免费使⽤的社区版，都是要收费，这点⾮常致命。⽂档是英⽂的，虽然ExtJs4.x有中⽂翻译，有时候还得参考英⽂⽂档理解，有点致命。
上⾯⼤概记住即可，以后问到，能转化成⾃⼰的语⾔简单描述出来即可。在我的博客中，⼤部分概念的都是尽量转化成容易理解的语⾔，让⼤家更好
理解，个⼈描述不是很准确，请见谅。如果想看官⽅的，⾃⼰百度⼀下：“ExtJs的优缺点”，就会出现⼀⼤篇⽂章。
3、怎么使⽤ExtJs? How
给⼤家推荐的学习⽅法：
对于ExtJs的国内视频都⽐较简单，介绍常规组件的使⽤⽅式，稍微有点开发经验的都可以跳过，不建议观看。那如果刚⼊门的程序员，或者是专门做前端的，实在是理解不了这种组件的写法的话，还是可以去看看视频。
我这⾥⾮常推荐查看官⽹⽂档：
官⽅⽂档地址：
Ext 4.x版本的中⽂⽂档：
稍微解读⼀下api (专门给零基础的⼩⽩)
左边是各种组件
右上⾓是组件搜索框，直接可以在这个搜索框⾥⾯查所有的组件。因为它是⼀个基于Ajax单页⾯系统，⾮常⽅⾯
其实左边组件，从名字来说，⾮常好的理解。举个例⼦来说：
App：针对整个项⽬组件
button：针对按钮组件
char：图表组件
container：容器组件
data：数据源组件
form：表单组件
grid：表格组件
layout：布局组件
dialag：弹窗组件
............................
你需要使⽤到什么组件，通过全局搜索，或者在分类中直接查就好了。。这⾥拿最关⼼的form组件来举例⼦：
看这两个组件，感觉还是⽐较简答把！基本你看视频，他也是拿⼀个组件的各种属性讲解，很难记住，还不如看⼿册
Ext组件关系
布局与容器：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论