原本是打算采用EXTJS4 的MVC做应用框架，已完成左侧树菜单、tabpanel（内嵌Grid，带查询及分页功能） 但是由于网络上的相关文章太少，公司对这个框架提出疑问，以后会不会遇到问题，所以改用ext3了...唉
2025-06-26 15:46:06
1.88MB
1
自己项目中完整的基于extjs4.1的mvc框架，我把它从项目中剥离出来，无后端集成，可以直接运行index.html，样式主题可以自己引用ext4.1提供的theme，该框架基于自己封装的自定义的基于ext4mvc的公共组件，需要一定的ext和js基础。
2025-06-26 15:45:26
7.91MB
1
在本实践项目“SpringMVC+ExtJs4.2实例”中，我们将深入探讨如何将SpringMVC框架与ExtJs4.2前端框架相结合，构建一个功能完善的Web应用程序。这个项目旨在展示如何利用这两个强大的技术栈来实现数据的动态交互和用户友好的界面设计。
SpringMVC是Spring框架的一部分，专门用于处理Web应用程序的请求-响应模型。它通过模型（Model）、视图（View）和控制器（Controller）的分离，提供了灵活的架构，使得开发者可以更好地组织代码，提高代码的可维护性和可扩展性。在SpringMVC中，控制器负责接收请求，处理业务逻辑，并将结果传递给视图层进行展示。
ExtJs4.2则是一款基于JavaScript的富客户端应用框架，它提供了一系列强大的组件，如表格、表单、图表等，用于构建复杂的桌面级Web应用。ExtJs4.2强调MVC模式，将应用划分为Model（数据模型）、View（视图）和Controller（控制器）三部分，这样可以保持前端代码结构清晰，便于管理。
在本实例中，我们完全遵循ExtJs4.2的MVC模式，将应用分为对应的Model、View和Controller。Model负责数据的存储和操作，通常会与后端的SpringMVC进行数据交互；View则是用户界面的展示，使用ExtJs4.2的组件进行构建；Controller作为两者之间的桥梁，监听用户操作，调用Model和View进行相应的处理。
与MySQL数据库的集成是项目的重要组成部分。MySQL是一种流行的开源关系型数据库管理系统，广泛应用于Web开发。在SpringMVC中，我们可以使用JdbcTemplate或MyBatis等持久层框架与MySQL进行数据访问。在ExtJs4.2中，通过Ajax请求，我们可以从SpringMVC的Controller获取数据，然后更新到View上，或者向服务器发送数据进行保存。
项目的具体实现可能包括以下步骤：
1. 创建SpringMVC的配置文件，定义DispatcherServlet、视图解析器、数据源以及相关的Controller。
2. 配置ExtJs4.2的App.js，定义应用的模型、视图和控制器。
3. 设计并实现MySQL的数据库表结构，以及与之对应的Java实体类。
4. 编写SpringMVC的Controller，处理HTTP请求，实现与数据库的交互。
5. 在ExtJs4.2的View中创建UI组件，与Controller绑定，实现动态数据展示和用户交互。
6. 使用Ajax在前端和后端之间传递数据，实现页面的动态加载和异步更新。
在yang-extjs-dome压缩包中，你可能会找到以下文件和目录：
- `src/main/java`：包含SpringMVC的Controller和相关的服务类。
- `src/main/resources`：存放配置文件，如Spring的配置文件、数据库连接配置等。
- `src/main/webapp`：Web应用的根目录，包括`WEB-INF`下的SpringMVC配置、`js`目录下的ExtJs4.2代码、`css`和`images`等静态资源。
- `web.xml`：Web应用的部署描述符，配置DispatcherServlet。
通过这个实例，开发者不仅可以学习到SpringMVC和ExtJs4.2的集成技巧，还能了解如何将它们与MySQL数据库结合，实现数据的存取和展示，对于提升Web开发能力具有很大的帮助。
2025-04-30 23:42:31
34.72MB
1
### Extjs4.0中文学习手册与入门详解
#### 一、Extjs4.0简介与获取
**Extjs4.0**是一款基于JavaScript的开源前端框架，它提供了丰富的用户界面组件和强大的数据处理功能，使得开发者能够快速构建高性能、交互性强的Web应用。对于初学者来说，熟悉Extjs4.0的基础知识是非常重要的。
- **获取Extjs4.0**：
- 官方网站：可以从[http://extjs.org.cn/](http://extjs.org.cn/)获得需要的Extjs发布包及更多支持。
- 下载最新版本的Extjs4.0压缩包，并解压。
- **搭建学习环境**：
- 假设您的开发环境中已安装MyEclipse和Tomcat。
- 在MyEclipse中新建一个Web项目，例如命名为`Extjs4`。
- 将Extjs4.0.7压缩包解压后的所有文件复制到项目根目录下的`WebContent`文件夹中。
- `Examples`目录包含了Ext官方提供的示例程序，其中可能包含PHP代码，如果遇到错误信息可暂时忽略。
- 部署并启动Tomcat服务器。
- 测试环境是否可用：打开浏览器访问`http://localhost:8080/Ext4/index.html`。
- 查看API文档：`http://localhost:8080/Ext4/docs/index.html`
- 查看示例页面：`http://localhost:8080/Ext4/examples/index.html`
#### 二、编写第一个Extjs程序
- **创建Hello World示例**：
- 在`WebContent`目录下新建`helloworld.js`文件，并输入以下内容：
```javascript
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
title: 'Hello Ext',
width: 350,
bodyPadding: 5,
items: [{
xtype: 'label',
text: 'Hello! Welcome to ExtJS.'
}]
}).render(document.body);
});
```
- 创建`helloworld.html`文件，并输入以下内容：
```html
Hello ExtJS
```
- 浏览器访问`http://localhost:8080/Ext4/helloworld.html`，如果一切正常，您将看到一个带有标题“Hello Ext”的面板，内容为“Hello! Welcome to ExtJS.”。
- **理解Ext.onReady和Ext.application**：
- `Ext.onReady`：该方法在当前DOM加载完成后自动调用，确保页面内的所有元素都能被脚本引用。示例代码：
```javascript
Ext.onReady(function(){
alert('Hello World!');
});
```
- `Ext.application`：用于定义一个Ext应用的基类，通常用于构建完整的Ext应用。
#### 三、DOM操作与事件响应
- **获取DOM元素**：
- 使用`Ext.get`方法根据ID获取页面上的元素：
```javascript
var myDiv = Ext.get('myDiv');
```
- `Ext.get`返回的是一个`Element`对象，可以直接操作底层DOM节点。
- **选择器**：
- 使用`Ext.select`方法获取具有特定CSS选择器的所有元素：
```javascript
var paragraphs = Ext.select('p');
```
- `Ext.select`返回的是`Ext.CompositeElement`对象，可通过其中的`each()`方法遍历所选元素。
- **事件处理**：
- 给按钮添加单击事件响应：
```javascript
var button = Ext.get('myButton');
button.on('click', function(){
alert('Button clicked!');
});
```
#### 四、Extjs4布局详解
- **Fit布局**：
- Fit布局中，子元素会自动填充整个父容器空间。
- 如果在Fit布局中放置了多个组件，仅显示第一个子元素。
- 示例代码：
```javascript
Ext.create('Ext.window.Window', {
title: 'Fit Layout Example',
layout: 'fit',
width: 400,
height: 300,
items: [
{xtype: 'grid', store: myStore}
]
}).show();
```
- **Border布局**：
- Border布局允许在一个容器内将子组件分成五个区域：北(North)、南(South)、东(East)、西(West)和中心(Center)。
- 每个区域可以包含一个或多个子组件，子组件可以根据布局规则调整其大小和位置。
- 示例代码：
```javascript
Ext.create('Ext.panel.Panel', {
title: 'Border Layout Example',
layout: 'border',
width: 600,
height: 400,
items: [
{xtype: 'grid', region: 'center', store: myStore},
{xtype: 'panel', region: 'west', width: 200, collapsible: true, title: 'Navigation'},
{xtype: 'toolbar', region: 'north', title: 'Toolbar'}
]
}).show();
```
通过以上步骤，您已经完成了Extjs4.0的初步学习，并能够掌握如何搭建开发环境、编写基础示例程序、操作DOM元素、处理事件以及理解不同类型的布局。希望这些基础知识能帮助您更好地探索和学习Extjs4.0。
2024-11-07 08:49:37
2.16MB
1
Extjs4.2.1核心包，做学习测试用，拷贝这些文件就行了，如果拷贝完整的包，机子很容易卡死，有这个核心就够了，不用去把完整的包全部拷贝到项目中去
引入这两个文件就够了：
2022-11-29 16:05:11
5.15MB
1
extjs4.2 日期控件 datefield 拓展加上选择时分秒功能。
在ExtJs4.2表单控件里分别有个时间控件（datafield）和时间控件(timefield)，但是官方提供的控件不能将日期和时分秒整合到一起，我从网上搜集整理了一个可用的选择日期时分秒的拓展控件，extjs版本是4.2，亲测能用，压缩包里面含有效果示例图和调用方式。
extjs4.2 ext4.2 日期时间控件 时分秒
2022-10-02 13:23:43
213KB
1
Extjs4下拉菜单中用Grid显示，有单选，和多选两个控件，完美通用代码控件，绝对让你好用，值得收藏^-^
2022-07-06 11:50:04
8KB
1
ExtJS4.2简单布局+权限管理+SqlServer2008(绑定数据、添加、修改、删除、查询、导入和导出、Ztree等)
2022-06-24 16:53:26
16.07MB
1