Other new components

Action action is a reusable "function block" abstracted from a component. That is, the same function between multiple components comes from the implementation of this action. Actions allow you to share handles, configuration options, and UI updates. All components support action interfaces (mainly toolbar, button, and menu components ). For details, see the API documentation.
Cyclebutton

This is a specially crafted splitbutton that contains the check element menu. When the menu item is clicked each time, the button is in the same status, triggering the change event (or calling the changehandler function of the button, if any) to activate the menu item. The feedviewer demo contains the example-the button at the preview window address is a splitbutton. Hidden (field)

This is a simple implementation of hidden fields in HTML forms, which can be controlled as an ext form component ..
Progress bar

The progress bar in 1.x is simply built in the MessageBox class. Now it has been restructured into a separate device and further improved. It supports two different modes (manual and automatic progress), and can be easily developed in the look and feel aspect.
Timefield

 

Ext. Data. groupingstore
Inherited from Ext. Data. Store and added the grouping function for store. Other usage is the same as that for store. The only thing you need to note is that you must specify sortinfo information when using groupingstore.
Added configuration attributes.
Groupfield: String // field used for grouping
Grouponsort: Boolean // if it is true, the sorting fields are regrouped. The default value is false.
Remotegroup: Boolean // remote sorting
Of course, there will be one more group method.
Groupby (string field, [Boolean forceregroup]): void
As the name implies, they are all re-ordered.

The following is a simple example.

VaR arr = [[1, 'bene', 'binladen '], [2, 'dump', 'binladen'], [3, 'dump ', 'lamp'];
VaR reader = new Ext. Data. arrayreader (
... {ID: 0 },
[
... {Name: 'name', mapping: 1 },
... {Name: 'occupation', mapping: 2}
]);

VaR store = new Ext. Data. groupingstore (...{
Reader: reader,
Groupfield: 'name ',
Grouponsort: True,
Sortinfo:... {field: 'occupation', ction: "ASC"} // you must specify sortinfo information when using groupingstore.
});
Store. loaddata (ARR );

// Gridpanel will be discussed later. It is used here to intuitively express groupingstore
VaR grid = new Ext. Grid. gridpanel (...{
DS: store,
Columns :[
... {Header: "name", width: 20, sortable: True, dataindex: 'name '},
... {Header: "Occupation", width: 20, sortable: True, dataindex: 'occupation '}
],
View: New Ext. Grid. groupingview (...{
Forcefit: True,
Grouptexttpl: '{text} ({[values. Rs. Length]} {[values. Rs. length> 1? "Items": "item"]})'
}),
Frame.: True,
Width: 700,
Height: 450,
Collapsible: True,
Animcollapse: false,
Title: 'groupexample ',
Renderto: 'div _ gridpanel'
});

Ext. Data. jsonstore
It is also a store subclass, with the goal of making it easier to use JSON objects as data sources.
Fields and root are added in the structure. The usage is as follows:
/**//*
This is a remote object. The returned content is consistent with the data of the local object below.
VaR store = new Ext. Data. jsonstore ({
URL: 'jsoncallback. js ',
Root: 'rows ',
Fields: ['id', 'name', 'occupation']
});
Store. Load ();
*/
VaR store = new Ext. Data. jsonstore (...{
Data:... {'results': 2, 'rows ':[
... {'Id': 1, 'name': 'Bill ', Occupation: 'gardener '},
... {'Id': 2, 'name': 'ben', Occupation: 'horticulturalist '}
]},
Autoload: True,
Root: 'rows ',
Fields: ['id', 'name', 'occupation']
})

// Skip gridpanel before proceeding
VaR grid = new Ext. Grid. gridpanel (...{
DS: store,
Columns :[
... {Header: "ID", width: 200, sortable: True, dataindex: 'id '},
... {Header: "name", width: 200, sortable: True, dataindex: 'name '},
... {Header: "Occupation", width: 200, sortable: True, dataindex: 'occupation '}
], Height: 350,
Width: 620,
Title: 'array grid ',
Renderto: 'div _ gridpanel'
});

Ext. Data. simplestore
Create a store object more conveniently from an array object,
Example
VaR store = new Ext. Data. jsonstore (...{
Data :[
[1, 'bill ', 'gardener'], [2, 'ben', 'horticulturalist']
],
Autoload: True,
Fields: [... {Name: 'name', mapping: 1},... {Name: 'occupation', mapping: 2}]
})
VaR grid = new Ext. Grid. gridpanel (...{
DS: store,
Columns :[
... {Header: "name", width: 200, sortable: True, dataindex: 'name '},
... {Header: "Occupation", width: 200, sortable: True, dataindex: 'occupation '}
], Height: 350,
Width: 620,
Renderto: 'div _ gridpanel'
});

Ext. Data. Store
Store is a storage container that provides record objects for ext devices. Its behavior and attributes are similar to data tables.

Method: do not list inherited methods
Store (Object config)
Constructor. config is defined {
Autoload: Boolean/object, // automatically load
Baseparams: object, // meaningful only when httpproxy is used
Data: array, // data
Proxy: Ext. Data. dataproxy, // data proxy
Prunemodifiedrecords: Boolean, // clear the modification Information
Reader: Ext. Data. Reader, // data reader
Remotesort: Boolean, // remote sorting?
Sortinfo: object, // {field: "fieldname", direction: "ASC | DESC "}
URL: String, // construct httpproxy using URL
}

Add (ext. Data. Record [] records): void
Add records to store

Addsorted (ext. Data. Record record): void
Add record to store and sort (only available for local sorting)

Clearfilter (Boolean suppressevent): void
Clear Filter

Collect (string dataindex, [Boolean allownull], [Boolean bypassfilter]): Array
Collects the unique values of fields specified by dataindex.

Commitchanges (): void
Submitting all changes to the store will trigger an update event.

Filter (string field, string/Regexp value, [Boolean anymatch], [Boolean casesensitive]): void
Set Filter
Field: String // field name
Value: String // If Regexp is a character generator, check whether the field starts with value. If it is a regular expression, check whether the field matches.
Anymatch: Boolean // matches any part, not only the start
Casesensitive: Boolean // case sensitive?

Filterby (function FN, [object scope]): void
More powerful filtering method. FN receives two parameters record and ID

Find (string property, string/Regexp value, [number startindex], [Boolean anymatch], [Boolean casesensitive]): Number
Find the first record that meets the condition. The parameter is the same as that of filter.

Findby (function FN, [object scope], [number startindex]): Number
See filterby

Getat (number index): Ext. Data. Record
Getbyid (string ID): Ext. Data. Record
Obtain the record object based on the filling number/ID.

Getcount (): void
Number of records obtained

Getmodifiedrecords (): Ext. Data. Record []
Get the modified record set

Getrange ([number startindex], [number endindex]): Ext. Data. Record []
Obtains the set of records within the specified range.

Getsortstate (): void
Get the sorting status: it is obviously not void but returns a sorting object, with the same structure as sortinfo {field: "fieldname", direction: "ASC | DESC "}

Gettotalcount (): void

This is useful for paging information.

Indexof (ext. Data. Record record): Number
Indexofid (string ID): Number
Obtain the serial number from the record or ID

Insert (number index, ext. Data. Record [] records): void
Inserts records at the specified position and triggers the Add event.

Isfiltered (): Boolean
If a filter is set, the returned result is true.

Load (Object options): void
The specified proxy uses the specified reader to read remote data.
Options is defined
{
Params: object, // parameters to be attached to the request URL
Callback: function // call back method, which receives three parameters
// R: Ext. Data. Record [] // returned record Array
// Options: Options imported by the options Load Method
// Success: Boolean // success
Scope: object, // range. The default value is store.
Add: Boolean append or update
}

Loaddata (Object Data, [Boolean append]): void
It is easier to use than load for the same purpose, but the data is read locally.

Query (string field, string/Regexp value, [Boolean anymatch], [Boolean casesensitive]): mixedcollection
Queryby (function FN, [object scope]): mixedcollection
Query. The parameters are similar to find, but all matching records are returned, instead of the sequence number of the first matching record.

Rejectchanges (): void
Discard all changes

Reload ([object options]): void
Re-load is equivalent to load (options, false). If no options is input, take the parameter used in the last load.

Remove (ext. Data. Record record): void
Remove a specified record

Removeall (): void
Remove all records

Setdefaultsort (string fieldname, [String dir]): void
Set Default sorting rules

Sort (string fieldname, [String dir]): void
Sort

Sum (string property, number start, number end): Number
Sum the property field from start to end

Event list
Add: (store this, ext. Data. Record [] records, number index)
Beforeload: (store this, object options)
Clear: (store this)
Datachanged: (store this)
Load: (store this, ext. Data. Record [] records, object options)
Loadexception :()
Metachange: (store this, object meta .)
Remove: (store this, ext. Data. Record record, number index)
Update: (store this, ext. Data. Record record, string operation)
It is easy to look at the name, and the parameters are not complex.

Use Cases
// Obtain the remote JSON object
// The content of jsoncallback. JS is
// {'Results': 2, 'rows ':[
// {'Id': 1, 'name': 'Bill ', Occupation: 'gardener '},
// {'Id': 2, 'name': 'ben', Occupation: 'horticulturalist'}]
//}
// Define proxy
VaR proxy = new Ext. Data. httpproxy (... {URL: 'jsoncallback. js '});
// Define Reader
VaR reader = new Ext. Data. jsonreader (
...{
Totalproperty: "Results", // The totalrecords property is obtained by JSON. Results.
Root: "rows", // The array for constructing metadata is obtained by JSON. rows.
ID: "ID" // ID is obtained by JSON. ID
},[
... {Name: 'name', mapping: 'name '},
... {Name: 'occupation'} // if the name and mapping have the same name, you can omit mapping.
]
)
// Create a store
VaR store = new Ext. Data. Store (...{
Proxy: proxy,
Reader: Reader
});
// Load
Store. Load ();

Example 2
// Obtain the remote XML file
// The content of the XML file is

2

1
Bill
Gardener

2
Ben
Horticulturalist

VaR proxy = new Ext. Data. httpproxy (... {URL: 'datasource. xml '});

VaR reader = new Ext. Data. xmlreader (...{
Totalrecords: "Results ",
Record: "row ",
ID: "ID"
},[
... {Name: 'name', mapping: 'name '},
... {Name: 'occupation '}
]);
VaR store = new Ext. Data. Store (...{
Proxy: proxy,
Reader: Reader
});
Store. Load ();

Example 3
// Obtain from the local Array
VaR arr = [[1, 'bill ', 'gardener'], [2, 'ben', 'horticulturalist'];
VaR reader = new Ext. Data. arrayreader (
... {ID: 0 },
[
... {Name: 'name', mapping: 1 },
... {Name: 'occupation', mapping: 2}
]);

VaR store = new Ext. Data. Store (...{
Reader: Reader
});
Store. loaddata (ARR );